0

我正在尝试通过数据表中的外部表单进行过滤。表格出现，但没有过滤框。我已经完全按照这些示例中所说的做了：示例 1和示例 2

有没有人对我出错的地方有任何想法，任何帮助将不胜感激。

此外，我正在尝试从 db 表中填充选择过滤器的值，我在下面包含了我的代码，任何人都可以看到这有什么问题，因为这也不起作用。

我的表格和数据表

<table cellspacing="0" cellpadding="0" border="0" class="display" id="Table1">
    <tbody>
       <tr id="filter_global">
           <td align="center">Employee</td>
           <td align="center" id="employee"></td>
       </tr>
       <tr id="filter_col1">
           <td align="center">Division</td>
           <td align="center" id="division"></td>
       </tr>
       <tr id="filter_col2">
           <td align="center">Line manager</td>
           <td align="center" id="line_manager"></td>
       </tr>
       <tr id="filter_col3">
           <td align="center">Contract</td>
           <td align="center" id="contract"></td>
       </tr>
       <tr id="filter_col4">
           <td align="center">Entitlement</td>
           <td align="center" id="entitlement"></td>
       </tr>
   </tbody>
</table>

<table class="dataTable" id="academic_table" cellpadding="2" cellspacing="2" width="100%">
<thead>
<tr>
<th>Year</th> 
<th>Employee</th>  
<th>Division</th>
<th>Line Manager</th>
<th>Contract</th>
<th>Entitlement</th>
<th>Units</th>
</tr> 
</thead>
<tbody>
    <tr>
        <td colspan="4" class="dataTables_empty">Loading data from server</td>
    </tr>
</tbody>

<tfoot>
<tr>
<th>Year</th> 
<th>Employee</th>  
<th>Division</th>
<th>Line Manager</th>
<th>Contract</th>
<th>Entitlement</th>
<th>Units</th>
</tr> 
</tfoot>
</table>
</div>

用于选择值的 db

$line_managers_filter = mysql_query("SELECT name FROM line_managers");
$division_filter = mysql_query("SELECT name FROM divisions");

初始化数据表列过滤器等。

   var $acTable= $("#academic_table").dataTable( {
            "oLanguage": {
                "sSearch": "Filter:"
            },
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "scripts/academic_serverside.php",
        "iDisplayLength": 10,       
            "bJQueryUI": false,
            "sPaginationType": "scrolling",
            "sDom": '<"clear"><"top"CTilr<"clear">pt>',
            "aoColumns": [ 
                {"bVisible":false},
                {"bVisible":true},
                {"bVisible":true},
                {"bVisible":true},
                {"bVisible":true},
                {"bVisible":true},
                {"bVisible":false}
            ],
            "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
            $('td:eq(4)', nRow).html(''+ aData[5] +'&nbsp;'+ aData[6] +'');
            },
            "oTableTools": {
                "sSwfPath": "swf/copy_csv_xls_pdf.swf"
            },
            "oColVis": {
                "activate": "mouseover",    
                "aiExclude": [0,6]
            }
        }).columnFilter({   
                aoColumns: [ 
                        { type: "select"},
                        { type: "text", sSelector: "#employee" },
                        { type: "select", values : [<?php 
                                                $tmp = Array();
                                                foreach($division_filter as $row) $tmp[] = '{value: "'.$row['name'].'"}'; 
                                                    echo join(',', $tmp);
                                                    ?>], 
                          sSelector: "#division" },
                        { type: "select", values : [<?php 
                                                $tmp = Array();
                                                    foreach($line_managers_filter as $row) $tmp[] = '{value: "'.$row['name'].'"}'; 
                                                    echo join(',', $tmp);
                                                    ?>], 
                        sSelector: "#line_manager"},
                        { type: "select", values : ["A", "B", "C"], sSelector: "#contract"},
                        { type: "text", sSelector: "#entitlement"},
                        { type: "text"}
                    ]
            });
4

2 回答 2

2

你错过了 sPlaceHolder: "head:before"

.columnFilter({
                sPlaceHolder: "head:before",
                aoColumns: [
                    { sSelector: "#filter #column1" }
                ]
于 2013-08-20T10:09:23.907 回答
2

检查“ jquery.dataTables.columnFilter.js ”的版本是否为1.5或更高版本。

于 2012-11-01T12:18:23.610 回答