当前位置: > > > jQuery - 第三方表格插件DataTables使用详解17(数据搜索)

jQuery - 第三方表格插件DataTables使用详解17(数据搜索)

二十八、搜索、过滤的设置

1,是否启用搜索功能

(1)默认情况下在表格右上方有一个用于过滤结果的文本输入框:

(2)将 searching 配置属性设置为 false 可以将其隐藏:
$('#myTable').DataTable({
  "searching": false,  //不显示搜索框
  //.......

2,在 td 标签上指定用于搜索的值

默认情况下搜索功能都是根据单元格里的内容进行搜索的。我们可以通过 data-search 标签属性指定与内容不同的值,该值专门用于搜索(不会在界面上显示出来)。
<table id="myTable">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>出生日期</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>011</td>
            <td>张三</td>
            <td data-search="10st November 2016 10/11/2016">2016-11-10</td>
        </tr>
        <tr>
            <td>002</td>
            <td>李四</td>
            <td data-search="23st November 2001 23/11/2001">2001-11-23</td>
        </tr>
    </tbody>
</table>

二十九、搜索指定列数据

默认的搜索功能全局的,也就是对表格中所有数据都会进行搜索。我们还可以指定某一列或者某几列进行搜索。

1,效果图

(1)我们在表格的 footer 上放置 3 个输入框(每一列对应一个)。

(2)当输入框内容改变时,自动对该列数据进行筛选。

(3)不同列分别使用不同条件同时进行搜索也是可以的。

2,样例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/jquery-3.1.1.js"  type="text/javascript"></script>
    <script src="media/js/jquery.dataTables.js"  type="text/javascript"></script>
    <link rel="stylesheet" href="media/css/jquery.dataTables.css" type="text/css" />
    <script type="text/javascript">
      $(document).ready(function() {
        $('#myTable').DataTable({
          "ajax": "data.txt"
        });

        //在每一个footer单元格中添加一个input输入框
        $('#myTable tfoot th').each( function () {
            var title = $(this).text();
            $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
        } );

        //获取DataTable对象
        var table = $('#myTable').DataTable();

        //根据footer输入框的内容进行搜索
        table.columns().every( function () {
            var that = this;
            $( 'input', this.footer() ).on( 'keyup change', function () {
                if ( that.search() !== this.value ) {
                    that
                        .search( this.value )
                        .draw();
                }
            } );
        } );
      });
    </script>
  </head>
  <body>
    <table id="myTable">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>出生日期</th>
            </tr>
        </thead>
        <tfoot>
           <tr>
               <th>编号</th>
               <th>姓名</th>
               <th>出生日期</th>
           </tr>
       </tfoot>
    </table>
  </body>
</html>

三十、多列搜索功能改进(使用下拉框)

上面的样例我们是通过输入框进行筛选,但手动输入文字还是有些不方便。这里做个功能改进,改成通过下拉框进行筛选。

1,效果图

(1)我们在表格的 footer 上放置 3 个下拉框(每一列对应一个)。下拉框内容为该列数据的汇总(去除重复的),并按升序排列。

(2)当下拉框选择完毕后,自动对该列数据进行筛选。

(3)不同列分别使用不同条件同时进行筛选也是可以的。

2,样例代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/jquery-3.1.1.js"  type="text/javascript"></script>
    <script src="media/js/jquery.dataTables.js"  type="text/javascript"></script>
    <link rel="stylesheet" href="media/css/jquery.dataTables.css" type="text/css" />
    <script type="text/javascript">
      $(document).ready(function() {
        $('#myTable').DataTable({
          "ajax": "data.txt",
          initComplete: function () {
              //在每一列下方添加用于筛选的下拉框
              this.api().columns().every( function () {
                  var column = this;
                  var select = $('<select><option value=""></option></select>')
                      .appendTo( $(column.footer()).empty() )
                      .on( 'change', function () {
                          var val = $.fn.dataTable.util.escapeRegex(
                              $(this).val()
                          );

                          column
                              .search( val ? '^'+val+'$' : '', true, false )
                              .draw();
                      } );

                  column.data().unique().sort().each( function ( d, j ) {
                      select.append( '<option value="'+d+'">'+d+'</option>' )
                  } );
              });
          }
        });
      });
    </script>
  </head>
  <body>
    <table id="myTable">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>出生日期</th>
                <th>性别</th>
                <th>电话</th>
            </tr>
        </thead>
        <tfoot>
           <tr>
               <th>编号</th>
               <th>姓名</th>
               <th>出生日期</th>
               <th>性别</th>
               <th>电话</th>
           </tr>
       </tfoot>
    </table>
  </body>
</html>
评论0