使用输入文本客户端过滤 DataTable答案

【问题标题】：Filter a DataTable using input texts client side使用输入文本客户端过滤 DataTable
【发布时间】：2017-08-14 18:32:41
【问题描述】：

我有一个 HTML 页面，头部有一些脚本，我有一个 ID=example 的 DataTable，还有一个按钮 id="btnFilter"，它应该根据用户键入的内容过滤 DataTable 中的数据在其他“输入文本标签”中。我尝试了很多我在互联网上找到的变体，但我无法做任何可以做我想做的事情。

这是我的 HTML，其中有输入和标签标签，用户将在其中键入他想要过滤的文本：

<table id="filterLog" class="table table-striped">
            <thead>
                <h4>Table</h4>
            </thead>
            <tfoot>
                <th>
                </th>
            </tfoot>
            <tbody>
                <tr>
                    <td><label class="input-group">From:</label></td>
                    <td><label class="input-group">To:</label></td>
                    <td><label class="input-group">Created:</label></td>
                    <td><label class="input-group">Comp:</label></td>
                </tr>
            </tbody>
            <tr id="linhasFiltro">
                <td><input class="form-control" type="date" id="date1" /></td>
                <td><input class="form-control" type="date" id="date2" /></td>
                <td><input class="form-control" type="text" id="creator" maxlength="15" /></td>
                <td><input class="form-control" type="text" id="cLog" maxlength="10"/></td>
            </tr>
            <tr>
                <td colspan="4"><label class="input-group">Type:</label></td>
            </tr>
            <tr>
                <td colspan="1">
                    <select id="tipoLog" class="form-control">
                        <option>Error</option>
                        <option>Test</option>
                        <option>Info</option>
                    </select>
                </td>
                <td><input type="button" value="Filter" id="btnFilter" class="btn btn-primary" />&nbsp;&nbsp;<input type="button" id="btnExport" value="Exportar" class="btn btn-primary" /></td>
            </tr>
            <tr class="border:0px;">
                <td colspan="6" id="consiError"  ></td>
            </tr>
        </table>

我想要的是，当用户在输入 id="cLog" 中键入并单击 btnFiltrar 时，DataTable 必须显示在等效列中具有相同文本的所有行。

谢谢大家

【问题讨论】：

标签： javascript jquery html filter datatable

【解决方案1】：

请在您的下一个问题中尝试更具体，向我们展示您已经尝试过的内容。人们不应该写你的解决方案，你应该写下你尝试过的和你的问题是什么，人们会帮助你。

看看 DataTables 插件： https://datatables.net/

使用 DataTables 的工作示例： https://jsfiddle.net/kt0yotsn/

HTML：

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
        </tr>
        <tr>
            <td>Cedric Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>$433,060</td>
        </tr>
    </tbody>
</table>

JAVASCRIPT：

$(document).ready(function() {
    $('#example').DataTable();
} );

除了上面的代码，还加载了以下Javascript库文件供本例使用：

//code.jquery.com/jquery-1.12.4.js https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js

加载了以下 CSS 库文件以在此示例中使用，以提供表格的样式：

https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css

【讨论】：

【解决方案2】：

我知道我在这里发帖已经有一段时间了，但是，我设法做到了。

function Filter($("#cLog").val()) {
            if (!($("#cLog").val() == "-Default-")) {
                tabelaProjetos.columns().every(function () {
                    var columnRelated = dataTableName.column(1);
                    if (columnRelated.search() !== $("#cLog").val()) {
                        columnRelated
                            .search($("#cLog").val());
                    }
                });
            }
        }

上面的代码根据表单内的特定'input' 过滤特定列。所以，我做了其他过滤函数来分别过滤其他输入，并设法在btnClick event 中调用所有这些函数，然后看，DataTable 被过滤了。

希望我能帮助别人，更希望我的英语至少是可读的。

谢谢

【讨论】：