Question

我正在尝试通过数据表中的外部表单进行过滤。该表出现但没有过滤器框。我完全按照以下示例中的说法完成了操作：example 1和example 2

有没有人知道我哪里出错了，任何帮助都会受到赞赏。

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

我的表单和数据表

<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 for select values

$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"}
                    ]
            });

Answer 1

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

Answer 2

你错过了sPlaceHolder：“head：before”

.columnFilter({
                sPlaceHolder: "head:before",
                aoColumns: [
                    { sSelector: "#filter #column1" }
                ]

来自外部表单的datatables.columnfilter插件过滤器

2 个答案: