如何使用js动态向数据表行添加数据链接

Question

I have table with clickable rows which renders the controller show action , in order to add new record to the database there is a button that render the new action and opens up a popup without refreshing the page, after submit the form in the popup it dynamically adds the new row to the datatables without refreshing, all the previous are working fine excepts the newly added row does is not clickable here is the table code

<%- model_class = Supplier -%>  
<table class="table table-custom pointer" id="editable-usage">
<thead>
<tr>
  <th class="table-text-center"><%= model_class.human_attribute_name(:name) %></th>
  <th class="table-text-center"><%= model_class.human_attribute_name(:code) %></th>
  <th class="table-text-center"><%= model_class.human_attribute_name(:email) %></th>
  <th class="table-text-center"><%= model_class.human_attribute_name(:total_credit) %></th>
  <th class="table-text-center"><%= model_class.human_attribute_name(:notes) %></th>
</tr>
</thead>
<tbody>
 <% @suppliers.each do |supplier| %>
  <tr data-link="<%= supplier_path(supplier) %>">
    <td><%= supplier.name %></td>
    <td><%= supplier.id %></td>
    <td><%= supplier.email %></td>
    <td><%= supplier.total_credit %></td>
    <td><%= supplier.notes %></td>
  </tr>
<% end %>
</tbody>
</table>

the create.js.erb file code :

// hide the popup
$('#splash').modal('hide');
// insert the new row
 var t = $('#editable-usage').DataTable();
 t.row.add([ '<%= @supplier.name  %>','SC00<%=@supplier.id %>','<%=@supplier.email %>','','<%=@supplier.notes %>']).draw();

how to add ( data-link="<%= supplier_path(supplier) %>" ) to this new tr

Answer 1

Couldn't you do something like $(tr).data("link", "<%= supplier_path(supplier) %>"); .

Answer 2

Maybe it's not the most elegant solution, but you can put callback on table redraw event, like this

t.on( 'draw', function () {
    $(t+'>tr').attr(data-link="<%= supplier_path(supplier) %>");
} );

I think it wouldn't be added without a callback.

Answer 3

I found a solution @ datatables reference

i added to create.js.erb

t.row.add([ '<%= @supplier.name  %>','SC00<%=@supplier.id %>','<%=@supplier.email %>','','<%=@supplier.notes %>']).draw().nodes().to$().attr("data-link", "<%= supplier_path(@supplier) %>");

and added to the js file

var oTable = $('#editable-usage').DataTable();
oTable.on( 'draw', function () {
    $("tr[data-link]").click(function () {
        window.location = this.dataset.link
    });
}); 

seems like i should added .nodes() .to$() so that i can add attribute