Datatables之搜索

最新推荐文章于 2021-04-02 20:45:09 发布

原创最新推荐文章于 2021-04-02 20:45:09 发布 · 3k 阅读

1 ·

CC 4.0 BY-SA版权

Datatables 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了Datatables中全局搜索和针对某列搜索的功能，并详细解释了这两种搜索方式如何通过不同的SQL关键字实现。此外，还提供了JavaScript代码示例，演示如何为Datatables的每个列设置搜索框，以及如何在用户输入时动态更新表格。

Datatables的搜索功能可以分别两种，一种是全局搜索，一种是针对某个列的搜索。全局搜索构成的sql语句使用的OR关键字，而列的搜索构成的sql语句使用的是AND关键字。

js代码如下：

$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example tfoot th').each( function () {
        var title = $('#example thead th').eq( $(this).index() ).text();//获取表尾的列名称
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );显示搜索框
    } );
 
    // DataTable
    var table = $('#example').DataTable();
 
    // Apply the search
    table.columns().eq( 0 ).each( function ( colIdx ) {//当搜索框中输入内容时动态重绘表格
        $( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
            table
                .column( colIdx )
                .search( this.value )
                .draw();
        } );
    } );
} );

注意：当表格数据动态来自于server-side时，表格的搜索动作将会全部交付给服务器端，服务器端返回数据后，前端表格只要负责重绘即可。