Unable to remember checkboxes across pages

falcon1

Hi all - I've been searching for an answer for this problem, and I've come across a lot of solutions, but I'm unable to get anything to work properly. I have a table that spans multiple paginated pages in DataTables - the first column is checkboxes, all of which have a unique value. What I need to do is submit a form that will send the values of those checked boxes in an array.

The problem I'm running into is that I can't get the values of any checkboxes beyond the first page to submit. From what I understand this is due to DataTables removing rows that aren't visible. I've tried the solution from here:stackoverflow.com/questions/33240409/how-to-submit-checkboxes-from-all-pages-with-jquery-datatables, but it didn't work. I also tried to get the .row.nodes() solution to work, but was unable.

Just for the sake of testing, I had this:

 $(document).on('submit','selection', function(e){
            var ads = [];

            // 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){
                        ads.push(($(this).val(this.value)));
                        console.log(ads);
                    }
                }
            });
        });

Is anyone able to provide some assistance on this? Thanks!

allan

Are you using server-side processing? If so, that's the issue - the rows only exist on the current page.

Allan

falcon1

Hi Allan -

I'm using client side processing. Here's what I have:

var oTable;
        oTable = $('#table_id').DataTable({
            autoWidth: true,
            "processing": true,
            "serverSide": false,
            "deferRender": true,
            order: [[ 1, "asc" ]]
        });

allan

In which case can you link to the page showing the issue so I can debug it please? As you will be able to see in this example row selection should be retained as the DataTable page changes.

Allan

falcon1

The page it's on is an administrative page, not a public facing one. If it makes any difference, when I select multiple check boxes on different pages, the check boxes do remain selected properly - the problem is that when I submit the check boxes to the next page, it only sends the values of the currently showing page.

For example, if I have 5 pages of data, and I select 2 check boxes from each page (totaling 10), only the values of 2 of the check boxes get passed on.

allan

I submit the check boxes to the next page, it only sends the values of the currently showing page.

That suggests you are using regular DOM methods or jQuery querying the DOM directly without using the DataTables API. e.g. instead of using:

table.$('input[type="checkbox"]').each(function(){

Use:

dataTable.rows().nodes().to$().find('input[type="checkbox"]').each(function(){

where dataTable is the DataTable API instance.

Allan

falcon1

Ah! Looks like that was indeed the issue - thanks for the assistance, Allan!

gabrielandre

Truly life saving. Thanks Allan and special thanks to falcon1 for sharing the issue

pravs

Hi basing on the above code how to get the second column data of datatable

pravs

   var dataArr = [];
    $('#lead_table tr').filter(':has(:checkbox:checked)').each(function() {       
         dataArr.push($(this).find('td').eq(2).text());   
        console.log(dataArr);
    });

});

This is my code please help me i need it urgent

tangerine

@pravs - you already have a thread about this. Please do not make duplicate posts.