數據表列過濾器沒有顯示

我在我的頁面上有列過濾器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>

我已經包括了我的這些

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

我也想投入到在頂部主網頁的表格PHP但那是另一個問題生病了。感謝您的任何幫助。

來源

2013-09-26 user1552172

不確定爲什麼列過濾器根本不顯示。也許是因爲你定義了其中的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>....

您還需要添加sPlaceHolder爲您設置columnFilter：

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

不確定你的sDom中的資本T代表什麼。你想要l還是f？

來源

2013-09-27 02:30:24 Daiku

我添加了您提供的提示，T代表tabletools，但仍然沒有輸入。我可以看到它半秒鐘，但隨後消失。 – user1552172

是的，當javascript運行時隱藏它。試着拿出sDom，看看是否導致問題。嘗試通過一次刪除一個功能來縮小範圍。 – Daiku

我沒有運氣修改sdom或完全刪除它。我所做的任何事情都無法讓它顯現出來而不會消失。 – user1552172

它不會顯示在數據表上啓用「sScrollY」。

來源

2013-09-30 18:22:15 user1552172

你是對的... – pegatron

數據表列過濾器沒有顯示

回答

相關問題