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