Search multiple tables using Datatables

2019-04-30 18:58发布

站内问答 / jQuery
1863 4 4

Ok, jquery amateur alert before I get started.

I'm using Datatables and cannot seem to get the fnFilterAll API to function, even with the example given on their site. I've exhausted an online google operation over a period of several hours last night and to my frustration I couldn't find an actual working example of the fnFilterAll.

fnFilterAll API is to allow searching of multiple tables (for those wondering).

To keep things simple at the moment, I created a split page with two tables. I think I'm missing something very elementary though, like perhaps I have to specify columns, but not sure where to do so (in this.value area?). At any rate, here's my code as a starting point:

Any assistance greatly appreciated. Thank you for your time.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

    <head>
        <meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
        <title>Testing Multi-Table Search Filter</title>
        <style type="text/css" title="currentStyle">
            @import"DataTables/media/css/demo_page.css";
            @import"DataTables/media/css/demo_table.css";
            #div1 {
                background: #FFFDE0;
                width: 49%;
                height: 50%;
                float: left;
            }
            #div2 {
                background: #E2FFE0;
                width: 49%;
                height: 50%;
                float: left;
            }
            #div-mid-spacer {
                width: 2%;
                height: auto;
                float: left;
            }
        </style>
        <script type="text/javascript" language="javascript" src="DataTables/media/js/jquery.js"></script>
        <script type="text/javascript" language="javascript" src="DataTables/media/js/jquery.dataTables.js"></script>
        <script type="text/javascript" charset="utf-8">
            $.fn.dataTableExt.oApi.fnFilterAll = function(oSettings, sInput, iColumn, bRegex, bSmart) {
                var settings = $.fn.dataTableSettings;

                for (var i = 0; i < settings.length; i++) {
                    settings[i].oInstance.fnFilter(sInput, iColumn, bRegex, bSmart);
                }
            };

            $(document).ready(function() {
                $('#table1').dataTable({
                    "bPaginate": false,

                });
                var oTable0 = $("#table1").dataTable();

                $("#table1").keyup(function() {
                    // Filter on the column (the index) of this element
                    oTable0.fnFilterAll(this.value);
                });
            });

            $(document).ready(function() {
                $('#table2').dataTable({
                    "bPaginate": false,

                });
                var oTable1 = $("#table2").dataTable();

                $("#table2").keyup(function() {
                    // Filter on the column (the index) of this element
                    oTable1.fnFilterAll(this.value);
                });
            });
        </script>
    </head>

    <body>
        <div id="dt_example">
            <div id="div1" style="overflow: auto;"> <b>Current</b>:
                <br>
                <table class='display' id='table1'>
                    <thead>
                        <tr>
                            <th valign='top' width='175'>Fname</th>
                            <th valign='top' width='100'>Lname</th>
                            <th valign='top' width='50'>Age</th>
                            <th valign='top' width='100'>Check</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>John</td>
                            <td>Smith</td>
                            <td>44</td>
                            <td>--</td>
                        </tr>
                        <tr>
                            <td>Mary</td>
                            <td>Doe</td>
                            <td>54</td>
                            <td>--</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div id="div-mid-spacer">&nbsp;</div>
            <div id="div2"> <b>Last</b>:
                <br>
                <table class='display' id='table2'>
                    <thead>
                        <tr>
                            <th valign='top' width='175'>Fname</th>
                            <th valign='top' width='100'>Lname</th>
                            <th valign='top' width='50'>Age</th>
                            <th valign='top' width='100'>Check</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>John</td>
                            <td>Smith</td>
                            <td>44</td>
                            <td>--</td>
                        </tr>
                        <tr>
                            <td>Mary</td>
                            <td>Doe</td>
                            <td>54</td>
                            <td>--</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        </div>
    </body>

</html>

4条回答
成全新的幸福
2楼-- · 2019-04-30 19:38

Since DataTables 1.10, API is available and preferred way would be to use API search function:

$("#SearchTables").keyup(function () {
    $('table').DataTable().search(this.value).draw();
});
查看更多
0人赞 添加讨论(0) 举报
【Aperson】
3楼-- · 2019-04-30 19:43

If I understand what it is you are looking for then you are almost there. I took your code and made a small tweak to it so search / filter on all the tables at once.

I put a demo on jsFiddle http://jsfiddle.net/bhSv9/

The search filters for datatables are local to the table assigned. What I did was add another input and pointed the global search to it instead.

The HTML addition

 <input type="text" id="Search_All">

The JavaScript change

 $("#Search_All").keyup(function () {
    oTable1.fnFilterAll(this.value);
 });

Hope it helps.

查看更多
0人赞 添加讨论(0) 举报
Root（大扎）
4楼-- · 2019-04-30 19:50

I made another version based on @bob work but, I cleaned the code to be tidy and have only one search box and work with a higher version of dataTables.

Fiddle source

           $.fn.dataTableExt.oApi.fnFilterAll = function(oSettings, sInput, iColumn, bRegex, bSmart) {
             var settings = $.fn.dataTableSettings;

             for (var i = 0; i < settings.length; i++) {
               settings[i].oInstance.fnFilter(sInput, iColumn, bRegex, bSmart);
             }
           };

           $(document).ready(function() {
             $('.display').dataTable({
               "bPaginate": false,
               "sDom": "<'dt-toolbar'<'col-sm-6 col-xs-12 hidden-xs'l>r>" +
                 "t" + "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",

             });
             var oTable0 = $("#table1").dataTable();
             var oTable1 = $("#table2").dataTable();
             $("#Search_All").keyup(function() {
               oTable0.fnFilterAll(this.value);
               oTable1.fnFilterAll(this.value);
             });
           });
            #div1 {
              background: #FFFDE0;
              width: 49%;
              height: 50%;
              float: left;
            }

            #div2 {
              background: #E2FFE0;
              width: 49%;
              height: 50%;
              float: left;
            }

            #div-mid-spacer {
              width: 2%;
              height: auto;
              float: left;
            }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Testing Multi-Table Search Filter2</title>Search All Tables
<input type="text" id="Search_All">
<br>
<br>
<div id="dt_example">
  <div id="div1" style="overflow: auto;"> <b>Current</b>:
    <br>
    <table class='display' id='table1'>
      <thead>
        <tr>
          <th valign='top' width='175'>Fname</th>
          <th valign='top' width='100'>Lname</th>
          <th valign='top' width='50'>Age</th>
          <th valign='top' width='100'>Check</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Smith</td>
          <td>44</td>
          <td>--</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Doe</td>
          <td>54</td>
          <td>--</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div id="div-mid-spacer">&nbsp;</div>
  <div id="div2"> <b>Last</b>:
    <br>
    <table class='display' id='table2'>
      <thead>
        <tr>
          <th valign='top' width='175'>Fname</th>
          <th valign='top' width='100'>Lname</th>
          <th valign='top' width='50'>Age</th>
          <th valign='top' width='100'>Check</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Smith</td>
          <td>44</td>
          <td>--</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Doe</td>
          <td>54</td>
          <td>--</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js'></script>

查看更多
0人赞 添加讨论(0) 举报
啃猪蹄的小仙女
5楼-- · 2019-04-30 20:04

The solution given by Bob works. I just want to simplify it even more, where you don't have to write the keyup() and $(document).ready() function multiple times. This worked for me.

$(document).ready(function () {
  .....
  .....
  var oTable0 = $("#table1").dataTable();
  var oTable1 = $("#table2").dataTable();
   $("#Search_All").keyup(function () {
     oTable0.fnFilterAll(this.value);              
     oTable1.fnFilterAll(this.value);
  });
 });

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)