Question

好的，在我开始之前，jquery业余警报。

我正在使用Datatables，似乎无法使fnFilterAll API正常运行，即使在其网站上提供的示例也是如此。我昨晚在几个小时的时间内完成了一次在线谷歌操作，令我沮丧的是，我找不到fnFilterAll的实际工作示例。

fnFilterAll API允许搜索多个表（对于那些想知道的人）。

为了使事情变得简单，我创建了一个包含两个表的拆分页面。我想我错过了一些非常基本的东西，比如也许我必须指定列，但不知道在哪里这样做（在this.value区域？）。无论如何，这是我的代码作为起点：

非常感谢任何帮助。谢谢你的时间。

<!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>

Answer 1

如果我明白你在寻找什么，那么你几乎就在那里。我拿了你的代码并对它进行了一些小调整，以便一次搜索/过滤所有表格。

我在jsFiddle http://jsfiddle.net/bhSv9/

上放了一个演示

数据表的搜索过滤器是分配的表的本地。我所做的是添加另一个输入，并将全局搜索指向它。

HTML添加

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

JavaScript更改

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

希望它有所帮助。

Answer 2

自DataTables 1.10起，API可用，首选方式是使用API search function：

$("#SearchTables").keyup(function () {
    $('table').DataTable().search(this.value).draw();
});

Answer 3

Bob提供的解决方案。我只是想简化它，你不必多次编写keyup（）和$（document）.ready（）函数。这对我有用。

＆＃13;

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

＆＃13;

Answer 4

我基于@bob制作了另一个版本，但是我清理了代码以使其整洁，只有一个搜索框，并且可以使用更高版本的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>

Answer 5

有一种更简单的方法（如Janis所说，进行编辑），并在搜索输入上设置一个事件，以搜索多个表的类而不是id。在这里它将使用class =“ datatable”

在所有数据表中搜索

$('#oversearch').on( 'keyup', function () {
        $('.datatable').DataTable().search( this.value ).draw();
    });

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

现在我需要突出显示结果表。这样做的方法如下：

    $('#oversearch').on( 'keyup', function () {
        $('.table').DataTable().search( this.value ).draw();

        var row = $('.table').DataTable().$('tr', { "filter": "applied" });
        var parent_div = row.parents("div").eq(1);
        parent_div.addClass("highlight");
    });

然后，您可以使用Parents（）jQuery导航到所需的任何父项。（这里我选择遇到的第二个div父对象= div.eq（1））

使用数据表搜索多个表

5 个答案: