Jquery datatables.columnfilter插件从外部表单筛选

我试图通过数据表中的外部表单进行过滤。 将显示该表，但没有筛选框。我已经做了这些例子中所说的：和

如果有人知道我哪里出了问题，我们将不胜感激

另外，我正在尝试从db表中填充select筛选器的值，我在下面包含了我的代码，有人能看出这有什么问题吗，因为这也不起作用

我的表单和数据表

初始化datatables列筛选器等

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

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

您缺少sPlaceHolder:head:before

你失踪了sPlaceHolder:头：之前

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

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

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