datatable 열 필터가 나타나지 않습니다.

내 데이터 테이블과 함께 내 페이지에 열 필터 js가 있습니다. 모든 것이 올라오고 콘솔에서 오류가 없지만, 하단의 입력은 부드럽게로드 된 후에 없습니다.datatable 열 필터가 나타나지 않습니다.

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

내 메인 페이지에 포함해야하지만, 그것은 또 다른 문제입니다 에 아프다. 어떤 도움을 주셔서 감사합니다.

출처

2013-09-26 user1552172

열 필터가 전혀 표시되지 않는 이유를 잘 모릅니다. 아마도 그 중 8 개를 정의했기 때문에 테이블의 나머지 부분에 7 개의 컬럼이 있습니까?

이 가기 열 필터 입력을 얻으려면, 당신은 thead 섹션에 tfoot 섹션에서 열 머리글의 두 번째 그룹을 이동해야합니다

  <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의 대문자가 무엇인지 모르겠습니다. l 또는 f을 원하십니까?

출처

2013-09-27 02:30:24 Daiku

내가 제공 한 정보를 추가했고 T는 태블릿 용이지만 입력은 여전히 입력했습니다. 나는 그것을 30 초 동안 볼 수 있지만 사라진다. – user1552172

그래, 뭔가 숨겨져있는 자바 스크립트가 실행됩니다. sDom을 꺼내서 문제를 일으키는 지 확인하십시오. 한 번에 하나의 기능을 제거하여 범위를 좁히십시오. – Daiku

나는 sdom을 수정하고 그것을 완전히 제거하는 운이 없다. 내가하는 일 중 아무 것도 나타나지 않고 떠나지 않을 수 있습니다. – user1552172

데이터 테이블에서 "sScrollY"가 활성화되어 나타나지 않습니다.

출처

2013-09-30 18:22:15 user1552172

당신 말이 맞아요 ... – pegatron

datatable 열 필터가 나타나지 않습니다.

답변

관련 문제