返回 导航

其他

hangge.com

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

作者：hangge | 2018-04-14 08:10

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

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）

回到顶部