Unable to remember checkboxes across pages

Unable to remember checkboxes across pages

falcon1falcon1 Posts: 4Questions: 1Answers: 0

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!

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Allan

  • falcon1falcon1 Posts: 4Questions: 1Answers: 0

    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" ]]
            });
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • falcon1falcon1 Posts: 4Questions: 1Answers: 0

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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

  • falcon1falcon1 Posts: 4Questions: 1Answers: 0

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

  • gabrielandregabrielandre Posts: 4Questions: 1Answers: 1

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

  • pravspravs Posts: 29Questions: 4Answers: 0

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

  • pravspravs Posts: 29Questions: 4Answers: 0
       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

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

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

This discussion has been closed.