Question

我有一个数据表，其列可以使用复选框进行过滤。选中该复选框后，将显示该列，如果未选中，则会隐藏该列。我试图在页面刷新时保存复选框的状态（即，选中或取消选中），这确实有效（即，在刷新时仍检查已检查的框，未检查的框不是）。不幸的是，这似乎对列是否显示没有影响。因此，如果单击该复选框，则会显示该列，如果再次单击（未选中），则不会显示该列。刷新后，复选框状态相同，但列不再受影响。我试图找出不仅如何保存复选框的状态，还要在页面刷新时保存这些复选框的效果（显示列或不显示）。

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

<label for="address" class="label">Name
  <input class="box" type="checkbox" name="pname" id="pname" onclick="fnShowHide(0);" checked>
</label>
<label for="address" class="label">Address
  <input class="box" type="checkbox" name="address" id="address" onclick="fnShowHide(1);" checked>
</label>
<label for="address" class="label">City
  <input class="box" type="checkbox" name="city" id="city" onclick="fnShowHide(2);" checked>
</label>
<label for="address" class="label">State
  <input class="box" type="checkbox" name="state" id="state" onclick="fnShowHide(3);" checked>
</label>
<label for="address" class="label">DOB
  <input class="box" type="checkbox" name="dob" id="dob" onclick="fnShowHide(4);" checked>
</label>
<label for="address" class="label">Occupation
  <input class="box" type="checkbox" name="occupation" id="occupation" onclick="fnShowHide(5);">
</label>
<label for="address" class="label">Vehicle Type
  <input class="box" type="checkbox" name="vehicle_type" id="vehicle_type" onclick="fnShowHide(6);" checked>
</label>

以下是数据表的外观（使用ShowHide函数）：

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

Answer 1

尝试从Cookie恢复时调用showhide函数：

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

使用复选框过滤数据表并保持状态刷新

1 个答案: