数据表列过滤器未显示答案

【问题标题】：datatable column filter not showing up数据表列过滤器未显示
【发布时间】：2013-10-02 12:15:48
【问题描述】：

我的页面上有列过滤器 js 以及我的数据表，一切都在控制台中运行并且没有错误，但是在平滑加载后底部的输入不存在。

<body>
    <div id="stable" style=" margin-left: 2%; margin-right: 2%; display: none">
        <table class="display" id="table_id">
             <thead>
                 <tr>
                     <th>Call Date</th>
                     <th>Unique ID</th>
                     <th>Source</th>
                     <th>App</th>
                     <th>Destination</th>
                     <th>Disposition</th>
                     <th>Duration</th>          
                 </tr> 

                <tr>
                    <th>Call Date</th>
                    <th>Unique ID</th>
                    <th>Source</th>
                    <th>App</th>
                    <th>Destination</th>
                    <th>Disposition</th>
                    <th>Duration</th>    
                </tr>
             </thead>
             <tbody></tbody>            
        </table>
    </div>           
</body>

$('#table_id').dataTable({
        "sAjaxSource": '/php/connect/searchtablequery.php',
        "bProcessing": true,
        "sScrollY": "500px",
        "bDeferRender": true,
        "bDestroy": true,
        "bFilter": true,
        "aaSorting": [[0, 'desc']],
        "sAjaxDataProp": "",
        "fnServerParams": function (aoData) {
            aoData.push({ "name": "db", "value": selected });
        },
        "aoColumns": [
            { "sWidth": "15%", "mData": "calldate" },
            { "sWidth": "15%", "sClass": "system", "sType": "string", "sWidth": "15%", "mData": "uniqueid" },
            { "sWidth": "15%", "sType": "string", "mData": "clid" },
            { "sWidth": "15%", "sType": "string", "mData": "lastapp" },
            { "sWidth": "15%", "sType": "string", "mData": "dst" },
            { "sWidth": "15%", "sType": "string", "mData": "disposition" },
            { "sWidth": "15%", "sType": "string", "mData": "duration_in_mins_and_secs" }, ],
        "iDisplayLength": 20,
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "sDom": '<"H"Tr>t<"F"ip>',
        "oTableTools": {
            "sSwfPath": "/DataTables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                {
                    "sExtends": "collection",
                    "sButtonText": "Export",
                    "aButtons": ["csv", "xls", "pdf"]
                }]
        }
    }).columnFilter({
        aoColumns: [ 
                { type: "select", values: [ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman']  },
                { type: "text" },
                 null,
                { type: "number" },
                { type: "select", values: [ 'A', 'C', 'U', 'X']  },
                null,
                null,
                null
        ]

    });

就像我说的那样，一旦表格完全初始化，它就会消失。

在我的主页上

    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/table.css">
    <link rel="stylesheet" href="/css/layout.css">

    <script type="text/javascript" charset="utf-8" src="/js/jquery.js"></script>
    <script type="text/javascript" charset="utf-8" src="/js/jquery-ui.js"></script>
    <script type="text/javascript" charset="utf-8" src="/js/userdblist.js"></script>
    <script type="text/javascript" charset="utf-8" src="/js/jquerymask.js"></script>
    <script type="text/javascript" charset="utf-8" src="/js/columnFilter.js"></script>

我的主页中包含了表格 php

    <link type="text/css" rel="stylesheet" href="/DataTables/media/css/smoothness/jquery-ui-1.10.3.custom.css"/>
    <link type="text/css" rel="stylesheet" href="/DataTables/media/css/jquery.dataTables_themeroller.css"/>
    <link type="text/css" rel="stylesheet" href="/DataTables/media/css/demo_table_jui.css" />
    <link type="text/css" rel="stylesheet" href="/DataTables/extras/TableTools/media/css/TableTools.css" />

    <script type="text/javascript" charset="utf-8" src="/DataTables/media/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/DataTables/extras/TableTools/media/js/TableTools.js"></script>
    <script type="text/javascript" charset="utf-8" src="/DataTables/extras/TableTools/media/js/ZeroClipboard.js"></script>
    <script type="text/javascript" src="/js/search.js"></script>

我也希望输入位于顶部，但这是另一个无法解决的问题。感谢您的帮助。

【问题讨论】：

标签： javascript php jquery html datatables

【解决方案1】：

不知道为什么列过滤器根本不显示。也许是因为您定义了其中的 8 个，但表的其余部分有 7 列？

要将列过滤器输入置于顶部，您需要将第二组列标题从 tfoot 部分移动到 thead 部分：

         <thead>
             <tr>
                 <th>Call Date</th>
                 <th>Unique ID</th>
                 <th>Source</th>
                 <th>App</th>
                 <th>Destination</th>
                 <th>Disposition</th>
                 <th>Duration</th>          
             </tr> 
             <tr>
                <th>Call Date</th>
                <th>Unique ID</th>
                <th>Source</th>
                <th>App</th>
                <th>Destination</th>
                <th>Disposition</th>
                <th>Duration</th>    
            </tr>
         </thead>
         <tbody>....

您还需要在设置 columnFilter 时添加 sPlaceHolder：

}).columnFilter({
    sPlaceHolder: "head:after",
    aoColumns: [ ...

不确定 sDom 中的大写字母 T 代表什么。你想要l 还是f？

【讨论】：

我添加了您提供的提示，T 表示 tabletools，但仍然没有输入。我可以看到它半秒钟，然后消失。
是的，当 javascript 运行时会隐藏它。尝试取出 sDom 并查看是否是导致问题的原因。尝试通过一次删除一项功能来缩小范围。
我没有运气修改 sdom 或完全删除它。我所做的一切都无法让它出现而不消失。
我想我的策略是去掉 dataTable 顶部的所有选项，这样即使缺少关键功能，你也能得到一些有用的东西。然后开始将它们一一添加回来，以便隔离冲突。
我知道您找到了 col 过滤器未显示的原因。你把它们移到顶部了吗？

【解决方案2】：

在数据表上启用“sScrollY”时不会显示。

【讨论】：