Persist checkbox selection in pagination

Persist checkbox selection in pagination

amithksamithks Posts: 2Questions: 1Answers: 0

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 ?

Answers

  • DAustinDAustin Posts: 15Questions: 0Answers: 1

    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.

  • colincolin Posts: 2,396Questions: 0Answers: 427

    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

  • DAustinDAustin Posts: 15Questions: 0Answers: 1

    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

  • amithksamithks Posts: 2Questions: 1Answers: 0

    Thanks for the solution DAustin.

Sign In or Register to comment.