按列过滤不起作用(jQuery DataTables)

时间:2015-10-17 11:55:12

标签: jquery datatables

如果数据是静态的(不是从数据库中获取),则按列工作进行搜索 但是,如果从数据库中检索数据,则按列搜索不起作用。

我的Html代码是这样的:

                    <table id="example">
                        <thead>
                          <tr class="filter_data">                     
                            <td>Hotel</td>
                            <td>City</td>
                            <td>Country</td>   
                            <td>Region </td>                            
                          </tr>
                          <tr>                         
                            <th>Hotel</th>
                            <th>City</th>
                            <th>Country</th>
                            <th>Region</th>                                                   
                          </tr>
                        </thead>
                    </table>

我的Javascript代码是这样的:

<script type="text/javascript">
    $(document).ready(function() {  
            $('#example .filter_data td').each( function () {
                var title = $('#example thead th').eq( $(this).index() ).text();
                $(this).html( '<input type="text" placeholder="'+title+'" />' );
            } );

            var table = $('#example').DataTable( {
                "processing": true,
                "serverSide": true,
                 "language": {
                     "processing": "load data"
                },
                "ajax": {
                    "url": BASEURL + "book/get_book",
                    "type": "POST"
                },
                "columnDefs": [{ 
                    'orderable': false,
                    'targets': [0,3]
                }], 
                "order": [[ 1, "desc" ]],
                "columns": 
                [                            
                    { "data": "hotel", "name": "hotel" },
                    { "data": "city", "name": "city" },
                    { "data": "country", "name": "country" },
                    { "data": "region", "name": "region" },
                ]
            } );

            table.columns().eq( 0 ).each( function ( colIdx ) {
                $( 'input', $('.filter_data td')[colIdx] ).on( 'keyup change', function () {
                    console.log(colIdx);
                    console.log(this.value);
                    table
                        .column( colIdx )
                        .search( this.value )
                        .draw();
                } );
            } );

    });     
</script> 

当我按列搜索时,它不起作用

谢谢

0 个答案:

没有答案