Javascript 使用复选框筛选数据表并在刷新时保持状态

我有一个datatable，它的列可以通过复选框过滤。选中该复选框时，将显示该列，如果未选中，则隐藏该列。我试图在页面刷新时保存复选框的状态（即，选中或未选中），这确实有效（即，选中的框在刷新时仍处于选中状态，未选中的框不处于选中状态）。不幸的是，这似乎对是否显示列没有影响。因此，如果选中复选框，则显示列，如果再次单击（未选中），则不显示列。刷新时，复选框状态相同，但列不再受影响。我不仅想知道如何保存复选框的状态，还想知道如何保存这些复选框在页面刷新时的效果（是否显示列）

以下是复选框的外观（注意，我已将复选框添加到复选框以显示datatable的默认行为）：

---

从Cookie还原时尝试调用showhide函数：

$("input.box").each(function( idx ) {
    var mycookie = $.cookie($(this).attr('name'));
    if (mycookie && mycookie == "true") {
        $(this).prop('checked', mycookie);
        fnShowHide(idx);
    }
});

---

你检查过浏览器中是否设置了cookies吗？我接受这个答案，尽管我无法投票（没有足够的代表），似乎我也不能将此作为答案。无论如何，问题实际上是我没有包括jquery.cookie.js。不过，您的回答也很有帮助，因为我创建了一个函数，在重新加载时从Cookie恢复时显示列，并按照您的建议调用了该函数。非常感谢。

var table = $('#people');
    table.dataTable({
        "iDisplayLength": 500,
        "bPaginate": false,
        "aLengthMenu": [[-1, 25, 50, 100], ["All", 25, 50, 100]],
        'aoColumns': [
                /* Name */ null,
                /* Address */ null,
                /* City */ null,
                /* State */           null,
                /* DOB */            { "bSortable": false },
                /* Occupation */     { "bVisible":    false },
                /* Vehicle Type */   { "bVisible":    false }
        ],
        'sPaginationType': 'full_numbers',
        'sDom': '<"dataTables_header"lfr>t<"dataTables_footer"ip>',
        'fnInitComplete': function( oSettings )
        { 
          table.closest('.dataTables_wrapper').find('.dataTables_length select').addClass('select blue-gradient glossy').styleSelect();
          tableStyled = true;
        }
    });

    function fnShowHide( iCol )
    {
        /* Get the DataTables object again - this is not a recreation, just a get of the object */
        var oTable = $('#people').dataTable();

        var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
        oTable.fnSetColumnVis( iCol, bVis ? false : true );
    }

$("input.box").each(function() {
        var mycookie = $.cookie($(this).attr('name'));
        if (mycookie && mycookie == "true") {
            $(this).prop('checked', mycookie);
        }
    });
    $("input.box").change(function() {
        $.cookie($(this).attr("name"), $(this).prop('checked'), {
        path: '/',
        expires: 365
        });
    });

$("input.box").each(function( idx ) {
    var mycookie = $.cookie($(this).attr('name'));
    if (mycookie && mycookie == "true") {
        $(this).prop('checked', mycookie);
        fnShowHide(idx);
    }
});