3

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

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

4

2 回答 2

4

不知道为什么列过滤器根本不显示。也许是因为您定义了其中的 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: [ ...

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

于 2013-09-27T02:30:24.613 回答
1

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

于 2013-09-30T18:22:15.953 回答