使用jquery.cookie

Question

我使用jQuery DataTable并且工具栏上有一个checkbox，用于检索所有记录。由于DataTable的{​​{3}}功能无效，我尝试使用stateSave以便在重新加载DataTable后保留复选框值（因为复选框是动态重绘的）每次重装）如下图所示：

$(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;
    });     

});

在调试代码之后，我看到虽然$('#cbIsAll')[0].checked行正确执行为true，但checkbox丢失的值晚于此行。你能否澄清我的错误在哪里？或者是否有更好，更明智的方法来保持checkbox值？

Answer 1

在您的案例中没有理由使用$.cookie。在复选框change事件中，您只需存储已检查状态的值，并使用该值设置重新加载表时生成的新复选框的checked属性

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

然后在datatable的回调函数中，设置复选框的选中状态

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