Question

我有一个HTML页面，头部有一些脚本，我有一个ID =示例的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必须显示在等效列中具有相同文本的所有行。

Thx guys

Answer 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

Answer 2

我知道自从我在这里发布以来已经有一段时间了，但是，我设法就这样做了。

＆＃13;

<jsp:include page="/resources/static/template/index.html"/>

＆＃13;

上面的代码根据表单中的特定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'和BEHOLD中调用所有这些函数，过滤了DataTable。

希望我可以帮助某人，并希望更多，我的英语至少是可读的。

Thxx

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

2 个答案: