具有自定义搜索字段的列可见性

Question

我正在尝试创建具有自定义搜索和列可见性的数据表。

我所做的是-

HTML

    <div class="container">
        <table id="employee-grid"  class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Employee name</th>
                    <th>Salary</th>
                    <th>Position</th>
                    <th>City</th>
                    <th>Extension</th>
                    <th>Joining date</th>
                    <th>Age</th>
                </tr>
            </thead>
            <thead>
                <tr>
                    <td><input type="text" id="0"  class="employee-search-input"></td>
                    <td><input type="text" id="1" class="employee-search-input"></td>
                    <td><input type="text" id="2" class="employee-search-input" ></td>
                    <td><input type="text" id="3" class="employee-search-input" ></td>
                    <td><input type="text" id="4" class="employee-search-input" ></td>
                    <td  valign="middle"><input  readonly="readonly" type="text" id="5" class="employee-search-input datepicker" ></td>
                    <td><input type="text" id="6" class="employee-search-input" ></td>
                </tr>
            </thead>
        </table>
    </div>

JS

$(document).ready(function()
{
var dataTable =  $('#employee-grid').DataTable(
{
    processing: true,
    serverSide: true,
    //ajax: "employee-grid-data.php", // json datasource for AJAX Data

    "ajax":
    {
        "url": "employee-grid-data.php",
        //"type": 'POST',
        "data": function ( d )              //Sending Custom Data for manupulating with elements out of the table
                {
                    d.myKey = "myValue";
                    // d.custom = $('#myInput').val();
                    // etc
                },
    },

    //"pagingType": "full_numbers", //Adding Last and First in Pagination
    stateSave: true,
    "language":{                    //Custom Message Setting
                    "lengthMenu": "Display _MENU_ records per page",    //Customizing menu Text
                    "zeroRecords": "Nothing found - sorry",             //Customizing zero record text - filtered
                    "info": "Showing page _PAGE_ of _PAGES_",           //Customizing showing record no
                    "infoEmpty": "No records available",                //Customizing zero record message - base
                    "infoFiltered": "(filtered from _MAX_ total records)"   //Customizing filtered message
                },
    "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],        //For customizing number of data sets per page

    dom: 'l<"toolbar"> Bfrtip',     //"Bfrtip" is for column visiblity - B F and R become visible

    initComplete:   function()  //Adding Custom button in Tools
                    {
                        $("div.toolbar").html('<button type="button" onclick="addNewEntry()">Add a New Record</button>');
                    },
    buttons:    [                   //Column Visiblity Buttons
                    {
                        extend: 'colvis',
                        collectionLayout: 'fixed three-column',
                        postfixButtons: [ 'colvisRestore' ]
                    }
                ],
});
});

我收到了-

工作正常，但如果我试图用它折叠任何列，就会出现问题。我得到了类似的东西-

因此，当其他项目隐藏时，表格的列过滤器不会隐藏。

Answer 1

解决方案

您正在使用两个 thead 元素，将其设为一个有两行的元素，如下所示。

<thead>
    <tr>
        <th>Employee name</th>
        <th>Salary</th>
        <th>Position</th>
        <th>City</th>
        <th>Extension</th>
        <th>Joining date</th>
        <th>Age</th>
    </tr>
    <tr>
        <td><input type="text" id="0"  class="employee-search-input"></td>
        <td><input type="text" id="1" class="employee-search-input"></td>
        <td><input type="text" id="2" class="employee-search-input" ></td>
        <td><input type="text" id="3" class="employee-search-input" ></td>
        <td><input type="text" id="4" class="employee-search-input" ></td>
        <td  valign="middle"><input  readonly="readonly" type="text" id="5" class="employee-search-input datepicker" ></td>
        <td><input type="text" id="6" class="employee-search-input" ></td>
    </tr>
</thead>

同样在这种情况下，您需要使用 orderCellsTop: true 选项来告诉 DataTables 使用顶行进行排序。

演示

有关代码和演示，请参阅this jsFiddle。