0

我正在尝试使用 ColumnFilter.js 数据表插件，我似乎已经正确实现了它，但是它没有过滤任何数据。好像 columnfilter 实际上并没有连接到我正在提取的数据。

这是我的html和脚本：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <link href="styles/jquery-ui-1.8.18.custom.css" rel="stylesheet"/>    
<link href="styles/style.css" rel="stylesheet"/>
<link href="styles/jquery-dataTables.css" rel="stylesheet"/>  
    <script type="text/javascript" src="javascript/jquery.js"></script>
    <script type="text/javascript" src="javascript/jquery-ui.js"></script>
<script type="text/javascript" src="javascript/jquery-dataTables.js"></script>
<script type="text/javascript" src="javascript/jquery-dataTables-columnFilter.js"></script>
<meta name="viewport" content="maximum-scale=1.0, user-scalable=no,width=device-width, initial-scale=1">
    <title>------</title>

<script type="text/javascript" charset="utf-8">         

        $(document).ready(function() {
           var oTable = $('#dt_op').dataTable( {
                "bServerSide": true,
                "bProcessing": true,
                "sAjaxSource": "./dustin_test.cfm",
                "iDisplayStart": 0,
                //Table is initially sorted on5thd col in Desc order
                //Which is DateTime Visited in this case.
                "aaSorting": [[5, "desc"]],
                "sPaginationType": "full_numbers"
            });
            oTable.columnFilter({
                sPlaceHolder: "head:after",
                aoColumns:
                [
                    null, null, null, 
                    {type: "select", values: ['Web', 'Mobile']},
                    {type: "select", values: ['Windows Phone', 'iPhone', 'iPad', 'Android Mobile', 'Android Tablet', 'Other/Desktop']},
                    {type: "date-range"},
                    {type: "select", values: ['Y', 'N', 'X']}
                ]
            });
         });
    </script>
     </head>
    <body id="dt_op_body">

<div id="container">

<table cellpadding="5px" cellspacing="0" border="1" id="dt_op">
        <thead>
            <tr>
                <th width="10%"></th>
                <th width="10%"></th>
                <th width="50%"></th>
                <th width="10%">Platform Category</th>
                <th width="10%">Platform</th>
                <th width="20%">Date/Time Visited</th>
                <th width="10%">Successful Login</th>
            </tr>
            <tr>
                <th>-----</th>
                <th>IP Address</th>
                <th>User Agent</th>
                <th>Platform Category</th>
                <th>Platform</th>
                <th>Date/Time Visited</th>
                <th>Successful Login</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="5">Loading Data from Server</td>   
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>-----</th>
                <th>IP Address</th>
                <th>User Agent</th>
                <th>Platform Category</th>
                <th>Platform</th>
                <th>Date/Time Visited</th>
                <th>Successful Login</th>
            </tr>
        </tfoot>
</table>
</div>

</body>
    </html>

我一直在查看的所有示例都与我实施的示例没有什么不同，但我仍然没有对我的数据进行任何更改。有什么似乎遗漏或错误吗？

4

0 回答 0