Checkboxes only work on first page - Datatables, rails

Viewed 10319

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

3 Answers

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)
                                );
                            }
                        });
                    });


                });

Related