Persist checkbox selection in pagination

amithks

how to Persist checkbox selection in different pages?
I am using the pagination on a table. The table is in a form. There are checkbox in the column. If i select check-boxes from different pages, not all the check-boxes are submitted. But they retain during presentation before submitting.

only the checkbox which is showing in the current page submits, not all the checkboxes from different pages. Any specific setting available to retain while submitting from all the pages ?

DAustin

As you are using pagination, the form cannot "see" the pages that aren't displayed, the html is removed from the DOM.

Option 1, update the pageLength of the table to -1 (show all) when submitting:

var table = $('#example').DataTable();
$("#form").on("submit", function(e){
    //Stop the form submitting
    e.preventDefault();
    //Show all the rows
    table.page.len( -1 ).draw();
    //Submit the form now it can see everything
    $(this).submit();
});

Option 2, Store the values in your own hidden input:

//Array to hold the checked ids
var checkboxes = []

function updateCheckboxes(checkbox){
    //Get the row id
    var id = checkbox.data("id");
    //Check the array for the id
    var arrPos = checkboxes.indexOf(id);
    //If it exists and we unchecked it, remove it
    if(arrPos > -1 && !checkbox.checked){
        checkboxes.splice(arrPos,1);
    }
    //Else it doesn't exist and we checked it
    else if (checkbox.checked)
    {
        checkboxes.push(id);
    }
    //Finally update the hidden input
$("#idOfHiddenInput").val(checkboxes);
}

//Event listener to detect changes
$("body").on("change",".checkbox-class", updateCheckboxes($(this)))

The advantage of option 1 is it's quick, but it will look ugly as the table suddenly grows in size. Option 2 requires you to handle the hidden values in the form action, but won't cause any visual issues.

colin

Hi @amithks ,

I don't quite follow your process - i.e. how would you check a checkbox on a different page, and when would it be submitted. Are you using Editor?

We're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

DAustin

I think this is actually a bad design choice. When a user uses a form they're going to expect all the inputs to be visible on that page, or across several pages as they go through the steps. By using pagination to hide inputs there's a strong chance the user will not see them either through laziness or obliviousness.

I say this because my colleagues often request that a table has all the results on one page that they can scroll through, as it can be annoying for them to compare values on different pages.

If you show everything on the first page, no one can claim they missed the information/input by it being hidden, plus you'll save yourself some coding time

amithks

Thanks for the solution DAustin.