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列フィルター入力を一番上に取得するには、列ヘッダーの 2 番目のグループをセクションからセクションに移動する必要があります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: [ ...

TsDomの首都が何を表しているのかわかりません。したいですlかf？

于 2013-09-27T02:30:24.613 に答える