jQuery Datatables ColVis,ColumnFilter - 隐藏列问题

时间:2016-02-17 20:15:05

标签: datatables datatables-1.10

iam在服务器端模式下将Datatables与ColVis扩展和ColumnFilter一起使用。当我隐藏列时,过滤可以正常工作,但只能刷新页面。在刷新页面之后,该列仍然是隐藏的(这是可以的,因为bStateSave = true),但列过滤器都是可见的(包括隐藏的列的过滤器),因此过滤不能正常工作。例如,ID列过滤下一列NAME列。

你能帮助我吗?

  • DataTables - 版本:1.10.7
  • jquery.dataTables.columnFilter.js - 版本:1.6.1
  • ColVis - 版本:1.1.2

数据表过滤器

//filtering
    oIncidentsTable.columnFilter({
        sPlaceHolder: "head:after",
        "aoColumns": [
                         { "type": "number" },
                         null,
                         { "type": "text" },
                         { "type": "text" },
                         { "type": "text" },
                         { "type": "text" },
                         { "type": "select", values: ['Nový', 'Rozpracovaný', 'Vyřešený'] },
                         { "type": "text" },
                         null
        ],
        bUseColVis: true
    });

表格HTML

<!--Table HTML-->
<div id="example2_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
    <div class="col-sm-12">
        <table id="TableIncident" class="table table-bordered table-hover dataTable table-striped" role="grid" style="cursor:pointer" aria-describedby="example2_info">
            <thead>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th>Id</th>
                    <th>Registrace</th>
                    <th>Uživatel Win</th>
                    <th>Uživatel FE</th>
                    <th>Stanice</th>
                    <th>Text</th>
                    <th>Stav</th>
                    <th>Řešitel</th>
                    <th>Urgentni</th>
                </tr>
            </thead>
            <tbody></tbody>
            <tfoot>
            </tfoot>
        </table>
    </div>
</div>

数据表

 var oIncidentsTable = $('#TableIncident').dataTable({
        "paging": true,
        "lengthChange": true,
        "iDisplayLength": 10,
        "info": true,
        "autoWidth": false,
        "bServerSide": true,
        "bStateSave": true,
        "sAjaxSource": "Home/AjaxHandler",
        "bProcessing": true,
        "ordering": true,
        "order": [[0, "desc"]],
        "fnServerParams": function (aoData) {
            aoData.push(
                { "name": "CHBsolved", "value": $("#CHBSolved").is(":checked") ? "true" : "false" },
                { "name": "CHBMyInc", "value": $("#CHBMyInc").is(":checked") ? "true" : "false" },
                { "name": "CHBNew", "value": $("#CHBNew").is(":checked") ? "true" : "false" });
        },
        "aoColumns": [
                        { "sName": "Id", "mDataProp": "id", "sWidth": "5%" },
                        { "sName": "Registrace", "mDataProp": "dateTime", "sWidth": "7%" },
                        { "sName": "UzivatelWin", "mDataProp": "UserWindows", "sWidth": "12%" },
                        { "sName": "UzivatelFE", "mDataProp": "userFE", "sWidth": "12%" },
                        { "sName": "Stanice", "mDataProp": "computer", "sWidth": "8%" },
                        { "sName": "Text", "mDataProp": "text", "sWidth": "25%" },
                        { "sName": "Stav", "mDataProp": "status", "sWidth": "5%" },
                        { "sName": "Resitel", "mDataProp": "solver", "sWidth": "12%" },
                        { "sName": "Urgentni", "mDataProp": "importance", "sWidth": "5%" }
        ],
        "createdRow": function (row, data, index) {
            if (data[6] == "Nový") {
                $('td', row).eq(6).addClass('highlight');
            }
        },
        dom:
            "<'#TableControls.row'<'pull-left'l><'pull-right'CBR>>" +
            "<'row'<'col-sm-12'tr>>" +
            "<'row'<'col-sm-5'i><'col-sm-7'p>>",
        buttons: [
            {
                extend: 'print',
                text: '<i class="fa fa-print"></i>',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'excelHtml5',
                text: '<i class="fa fa-file-excel-o"></i>',
                titleAttr: 'Excel',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'pdfHtml5',
                text: '<i class="fa fa-file-pdf-o"></i>',
                exportOptions: {
                    columns: ':visible'
                }
            }
        ],
        "colVis": {
            "buttonText": "Zobrazit sloupce"
            //activate: "mouseover"
        },
        "language": {
            "lengthMenu": "Záznamů na stránku _MENU_",
            "zeroRecords": "Nebyly nalazeny žádné záznamy",
            "info": "Stránka _PAGE_ z _PAGES_",
            "infoEmpty": "Tabulka neobsahuje žádné záznamy",
            "infoFiltered": "(- vyfiltrovano z _MAX_ záznamů)",
            "sSearch": "Prohledat všechny sloupce:",
            "processing": "<div class='dataTables_processing'><i class='fa fa-spinner fa-spin fa-2x'></i>NAČÍTÁM...</div>",
            "paginate": {
                "first": "První",
                "last": "Poslední",
                "next": "Další",
                "previous": "Předchozí"
            }
        },
        //obarveni radku, ktere maji vyssi dulezitosts
        "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            if (aData["importance"] == 'True') {
                $(nRow).addClass('danger');
            }
        }
    });

0 个答案:

没有答案