DataTable search not working for dynamic rows

I have following table #physician-privellages on which I have implemented DataTable.

#physician-privellages

DataTable

.table
table.table.table-striped#physician-privellages
thead
tr
th First Name
th Last Name
th Email
th Patient Privileges
th Visit Privileges
- if Authorizer.physician_practice?
th My Practice
th Actions
tbody.privileged-physician-records
- user_permissions_for_physicians = physician_privileges_permissions(user_id)
- user_permissions_for_physician = user_permissions_for_physicians[user_id]
- user_permissions_for_physician&.delete(user_id)
- user_permissions_for_physician&.each do |user_id, user_permissions|
tr
td
= "#{user_permissions[:physician].first_name}"
td
= "#{user_permissions[:physician].last_name}"
td
= "#{user_permissions[:physician].email}"
td class="physician_#{user_permissions[:physician].id}"
.patients
= "#{user_permissions[:patient_permissions].first.titleize}"
text = hidden_field_tag 'physicians_privileges[patients]', user_permissions[:patient_permissions].first
td class="physician_#{user_permissions[:physician].id}"
.visits
= "#{user_permissions[:visit_permissions].first.titleize}"
text = hidden_field_tag 'physicians_privileges[visits]', user_permissions[:visit_permissions].first
- if Authorizer.physician_practice?
td class="physician_#{user_permissions[:physician].id}"
- if user_permissions[:note_permissions] ==
.practice
| None
text = hidden_field_tag "physicians_privileges[notes]", ["disable_notes"].first
- else
.practice
= "#{note_permission_translation[user_permissions[:note_permissions].first&.to_sym]}"
text = hidden_field_tag 'physicians_privileges[notes]', user_permissions[:note_permissions].first
td class="physician_#{user_permissions[:physician].id}"
text = hidden_field_tag 'physicians_privileges[user_id]', user_permissions[:physician].id, { class: 'user_id' }
.btn-group.btn-group-xs.width-45.inline-flex-end
- if user_permissions_for_physician.present?
button.btn.btn-default.js-load-physician-permissions-modal type="button"
= font_awesome_icon('edit')
- require 'json'
text.hidden = user_permissions.to_json
a.btn.btn-danger.delete-physician-privilege.main-form data-id="#{user_permissions[:physician].id}"
= font_awesome_icon('destroy')


I am adding some rows dynamically using CoffeeScript which returns the following html.slim and append it in the above table.

CoffeeScript

html.slim

- physician_users.each do |physician|
tr
td #{physician.first_name}
td #{physician.last_name}
td #{physician.email}
- if permissions == 'admin'
td class="physician_#{physician.id}"
.patients
| Administer Patients
text = hidden_field_tag 'physicians_privileges[patients]', 'administer_patients'
td class="physician_#{physician.id}"
.visits
| Administer Visits
text = hidden_field_tag 'physicians_privileges[visits]', 'administer_visits'
- else
td class="physician_#{physician.id}"
.patients
| View Patients
text = hidden_field_tag 'physicians_privileges[patients]', 'view_patients'
td class="physician_#{physician.id}"
.visits
| View visits
text = hidden_field_tag 'physicians_privileges[visits]', 'view_visits'
- if Authorizer.physician_practice?
td class="physician_#{physician.id}"
.practice
| None
text = hidden_field_tag "physicians_privileges[notes]", 'disable_notes'
td class="physician_#{physician.id}"
text = hidden_field_tag 'physicians_privileges[user_id]', physician.id
.btn-group.btn-group-xs.width-45.inline-flex-end
button.btn.btn-default.js-load-physician-permissions-modal type="button"
= font_awesome_icon('edit')
text.hidden = {physician: physician}.to_json
a.btn.btn-danger.delete-physician-privilege.main-form data-id="#{physician.id}"
= font_awesome_icon('destroy')


Now the problem is, the Search functionality is not working for rows that are appended by html and js.

html

js

I have done some google search and found a way to include a new row in DataTable. Add new row in DataTable
But it is showing that we can only use parameters in table.row.add and I have some hidden_fields in some columns and edit-delete buttons as well. Moveover I need to handle HTML classes in my new rows as well.
So is there a way to handle such situation?

table.row.add

Here is my AJAX call to add a new row

$.ajax
url: '/organizations/'+org_id+'/members/get_privileged_physicians'
type: 'get'
dataType: 'json'
data: ids: new_selected_user_ids, permissions: permission
success: (data) ->
$('.dataTables_empty').remove()
$('.privileged-physician-records').append data.markup
$('.select_physicians').val('').trigger('chosen:updated')
$('.physicians-priviliges-area .chosen-select').chosen
allow_single_deselect: true
no_results_text: 'No results'
width: '100%'
return


And here is my controller function

def get_privileged_physicians
physician_users = User.where(id: params[:ids])
markup = render_to_string(partial: 'auth/members/privileged_physician_users',
locals: { physician_users: physician_users, permissions: params[:permissions] })
render json: { markup: markup }
end


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.