How to add checkbox per row when working with dataTable in ruby on rails?

Question

I am using DataTables in my ruby on rails Application. Its works fine with table tools also. But I want to add checkbox also per row in datatable to perform batch action. I searched all the examples in the official site but i can't find checkbox.

I want to perform batch delete action in my datatable.

Can anyone suggest me to add checkbox in my datatable??

Answer 1

I am not sure about dataTables whether it provides direct delete mechanism or not. But this is what I did in plain rails. Lets take an example of products. in your view file have something like:

<%= form_for('Product', :as => 'products', :url => delete_selected_products_path) do |f| %>
  <%= f.button :submit, 'Delete Selected', :class => 'btn-danger product' %>

  <div class="clear">&nbsp;</div>

  <table>
    <thead>
      <tr>
        <th class="select-row"></th
        <th>Product Name</th>
        <th>Description</th>
        <th>Price</th>
        <th class="actions"></th>
      </tr>
    </thead>

    <tbody>
      <% @products.each do |product| %>
        <tr>
          <td class="first-column"><%= check_box_tag 'ids[]', product.id, false, :class => 'table-row-checkbox' %></td>
          <td><%= product.name %></td>
          <td><%= product.description %></td>
          <td><%= product.price %></td>
          <td><%= link_to "View & Edit", product_path(product) %></td>
        </tr>
      <% end %>
    </tbody>
  </table>
<% end %>

and in your ProductsController define the delete_selected action as

def delete_selected
  params[:ids].each do |id|
    product = Product.find(id)
    product.destroy
  end unless params[:ids].blank?
  redirect_to products_path, :notice => 'Selected products are deleted successfully!'
end

and in your routes.rb add delete_selected as collection for products resources:

resources :products do
  post :delete_selected, :on => :collection
end

You can use AJAX if you want. :)

Answer 2

Datatables.net provides two ways to delete.

1) [tableObject].fnDeleteRow([rowToDelete]) - deletes one row at a time

2) [tableObject].fnClearTable() - clears the entire table

If you are using AJAX source then you would use:

var oTable = ("#MyTable").datatables({
    "aoColumnDefs" : [
        {
            "fnRender" : function(oObj, sVal){
                //oObj.aData[columnIndex] will get the value for the column
                //sVal is the value of the column being updated
                return sVal + "<input type='check'>";
            }, 
        "aTargets" : [ColumnIndexToTarget]}
     ]});

function OnDeleteButtonClick(){
    $.each(oTable.$("tr").filter("input:checked"), function(index, data){
        oTable.fnDeleteRow(data);
    });
}