Checkboxes only work on first page - Datatables, rails

Question

Senario: So basically I'm using DataTables and have checkboxes on its first column. My DataTables have multiple pages (pagination).

The Problem: When I check a few boxes on a page (could be any page), AND also check a few on OTHER pages.

The results only gets saved if I am on the current page

I'm quite new to datatables/javascript and can't really figure out how to solve this issue.

$('#formDataTable').DataTable({
         responsive: true,
         autoWidth: true,
         "bFilter": true,
         "bRetrieve": true,
         "bInfo": true,
         "sPageFirst": false,
         "sPageLast": false,
});

I have read these SO pages. Checkboxes will only work on current pagination page in jQuery datatables Link is currently dead to this question -> Pagination with selected check boxes. Checkboxes will only work on current pagination page. jQuery datatables

Answer 1

CAUSE

jQuery DataTables removes non-visible rows from DOM for performance reasons, that is why when you submit the form only visible checkboxes get submitted.

SOLUTION

You may need to turn those <input type="checkbox"> that are checked and don't exist in DOM into <input type="hidden"> upon form submission.

For example, to submit form with values of all checkboxes:

var table = $('#example').DataTable();

$("form").on('submit', function(e){
   var $form = $(this);

   // Iterate over all checkboxes in the table
   table.$('input[type="checkbox"]').each(function(){
      // If checkbox doesn't exist in DOM
      if(!$.contains(document, this)){
         // If checkbox is checked
         if(this.checked){
            // Create a hidden element 
            $form.append(
               $('<input>')
                  .attr('type', 'hidden')
                  .attr('name', this.name)
                  .val(this.value)
            );
         }
      } 
   });          
});

If you're submitting the form via Ajax, it's even simpler.

For example, to submit form via Ajax with values of all checkboxes:

var table = $('#example').DataTable();

$("#btn-submit").on('click', function(e){
   e.preventDefault();

   $.ajax({
      url: "/path/to/your/script.php",
      data: table.$('input[type="checkbox"]').serialize();
   }).done(function(data){
      console.log("Response", data);
   });
});

DEMO

See our article jQuery DataTables: How to submit all pages form data for demonstration.

Answer 2

if you are using Rails what about using Form Helpers?

If you are creating a new record, one simple example is:

<%= form_for(:table_name, :action => 'create') do |f| %>

<table summary="Form data table">
  <tr>
    <th><%= f.label(:responsive) %></th>
    <td><%= f.check_box(:responsive) %></td>
  </tr>
  <tr>
    <th><%= f.label(:auto_width) %></th>
    <td><%= f.check_box(:auto_width) %></td>
  </tr>
</table>

<%= submit_tag("Create Page") %>

<% end %>

Even if you have several pages, if you keep all your form helpers inside the form_for method, everything should be saved to your database.

Answer 3

after trying lots of way finally i found this sweet and simple way of solving this problem!!!! here #contect_form is form id ...you must put your data table inside a form coz on page load you can initialize datatable rows

     var table;
                $(document).ready(function () {
                    table = $('#table_id').DataTable({
                        scrollY: "412px",
                        scrollX: true,
                        AutoWidth: false,
                        scrollCollapse: false,
                        paging: true,

                    });
                    $('#contact_form').on('submit', function (e) {
                        var form = this;

                        // Encode a set of form elements from all pages as an array of names and values
                        var params = table.$('input,select,textarea').serializeArray();

                        // Iterate over all form elements
                        $.each(params, function () {
                            // If element doesn't exist in DOM
                            if (!$.contains(document, form[this.name])) {
                                // Create a hidden element
                                $(form).append(
                                   $('<input>')
                                      .attr('type', 'hidden')
                                      .attr('name', this.name)
                                      .val(this.value)
                                );
                            }
                        });
                    });


                });

Answer 4

tablaClientes.rows().every(function (rowIdx, tableLoop, rowLoop) {

            var data = this.data();

            let $tr = $(this.node());
            let $checkbox = $tr.find('td:first-child input[type="checkbox"]')
            if ($checkbox.is(':checked')) {
                var Cli = {
                            Rpu : $tr.find('.Rpu').html(),
                            Rmu : $tr.find('.Rmu').html()
                           }
            Clientes.push(Cli);
            }
        });