jQuery DataTables - 自定义列可见性

Question

我喜欢使用 jQuery DataTable Plugin 并且想创建这样的东西-

当任何人点击 "Column visibility" 按钮时，他们会看到这样的-

但我不喜欢全局搜索按钮和分页在顶部（因为我已经在底部有分页）。

我只想要那个按钮。

所以，我所做的是-

$(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">frtip Bfrtip',        //"Bfrtip" is for column visiblity

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

更珍贵-

    dom: 'l<"toolbar">frtip Bfrtip',
    buttons:    [                   //Column Visiblity Buttons
                    {
                        extend: 'colvis',
                        collectionLayout: 'fixed three-column',
                        postfixButtons: [ 'colvisRestore' ]
                    }
                ],

但我发现了这样的东西-

所以，我只想要绿色圆形而不是红色圆形。

我做错了什么？

Answer 1

您需要在初始化时添加 dataTable 的 dom 选项，如下所示：

$('#example').DataTable( {
        "dom": '<"top"i>rt<"bottom"flp><"clear">'
});

可以看到Source/Demo here

更精确explanation

Answer 2

SOLUTION

Option dom 一开始可能有点迷惑，但简单地说，里面的每个字母都是DataTables的一个特性。字母的顺序也描述了它们在页面上的位置。

B - 按钮，
f - 过滤输入
r - 处理显示元素
t - table
i - 信息面板
p - 分页控件

还支持其他字母和 HTML 标记。请参阅 dom 选项和按钮 - dom 参数页面以获取更多信息。

使用下面的代码：

var dataTable =  $('#employee-grid').DataTable({
    // ... skipped ... 
    dom: 'Brtip',        
    buttons: [
       {
          extend: 'colvis',
          collectionLayout: 'fixed three-column',
          postfixButtons: [ 'colvisRestore' ]
       }
    ]
});

DEMO

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

jQuery DataTables - 自定义列可见性

jQuery DataTables - Custom Column Visiblity

javascript

jquery

datatables