自定义搜索字段的列可见性 [英] Column Visibility with Custom Search Fields

问题描述

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

I am trying to create a datatable with custom search and column visibility.

我所做的是 -

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' ]
                    }
                ],
});
});

我得到这个 -

a href =https://i.stack.imgur.com/5b9kK.jpg =nofollow noreferrer>

正常工作，但如果我试图折叠任何列，问题就会发生。我得到这样的东西 -

Works fine, but problem going if I am trying to fold any column with it. I am getting something like it-

所以当其他项目隐藏时，表的列过滤器不会隐藏。

So, the table's column filters is not going to hide when other items are hiding.

推荐答案

解决方案

您正在使用两个 thead 元素，使它成为两行，如下所示。

You're using two thead elements, make it one with two rows instead as shown below.

<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使用顶行进行排序。

Also in this case you need to use orderCellsTop: true option to tell DataTables to use top row for sorting.

演示

请参阅这个jsFiddle 进行代码和演示。

See this jsFiddle for code and demonstration.

这篇关于自定义搜索字段的列可见性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！