Question

我的页面上有列过滤器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>

我也希望输入处于最顶层，但这是另一个问题。谢谢你的帮助。

Answer 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？

Answer 2

它没有显示在数据表上启用“sScrollY”。

数据表列过滤器未显示

2 个答案: