Cannot retain checkbox value using jquery.cookie

Question

I use jQuery DataTable and there is a checkbox on the toolbar that is used for retrieving all records or not. As stateSave feature of DataTable does not work properly, I tried to use jquery.cookie in order to keep the checkbox value after reloading the DataTable (because the checkbox is redrawn dynamically on every reload) as shown below:

$(document).ready(function() {

    $('#example').DataTable( {

        //code omitted for brevity
        "serverSide": true,
        "ajaxSource": "/Student/GetStudents",
        "fnServerData": function (sSource, aoData, fnCallback) {
            /* Add some extra data to the sender */
            aoData.push({ "name": "isAll", "value": $("#cbIsAll").is(":checked") });
            $.getJSON(sSource, aoData, function (json) { 
                /* Do whatever additional processing you want on the callback, then tell DataTables */
                fnCallback(json);
            });
        },
        "fnDrawCallback": function() {
            $("div.toolbar").html('<input type="checkbox" id="cbIsAll" name="demo" /> Get all records');
        }
    });


    $(document).on('change', '#cbIsAll', function () {
        var isClicked = $('#cbIsAll').is(':checked') ? true : false;
        $.cookie('clicked', isClicked, { expires: 1 }); // expires in 1 day
        table.ajax.reload();
        $('#cbIsAll')[0].checked = ($.cookie('clicked') == "true") ? true : false;
    });     

});

After debugging the code I saw that although the $('#cbIsAll')[0].checked line is executed properly as true, the checkbox lost value later than this line. Could you please clarify me about where the mistake is? Or is there a better and smart way to keep the checkbox value?

If only the datatable is refreshed (not the whole page), why can't you just store the value in a javascript variable and reset the value based on that? — user3559349
– user3559349, Commented Oct 6, 2016 at 8:39
Yes I know. but when you check/uncheck it you can assign its value, say var isAllSelected = $('#cbIsAll).is(':checked'); and then after the datatable is reloaded - $('#cbIsAll').prop('checked', isAllSelected); — user3559349
– user3559349, Commented Oct 6, 2016 at 8:45

user3559349 · Accepted Answer · 2016-10-06 12:24:53Z

1

There is no reason to use $.cookie in your case. In the checkbox change event, you can simply store the value of the checked state and use that to set the checked property of the new checkbox generated when you reload the table

var isChecked;
$(document).on('change', '#cbIsAll', function () {
    // Store the current value
    isChecked = $(this).is(':checked');
    ....

Then in the datatable's callback function, set the checked state of the checkbox

$('#cbIsAll').prop('checked', isChecked);

answered Oct 6, 2016 at 12:24

user3559349

Sign up to request clarification or add additional context in comments.

1 Comment

Jack Over a year ago

That is smart and quick solution with one of the best approach regarding to this issue. Many thanks for your useful tips and helps...

Collectives™ on Stack Overflow

Cannot retain checkbox value using jquery.cookie

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related