使用输入文本客户端过滤数据表
我有一个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" /> <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家伙
请尽量在你接下来的问题更具体,告诉我们什么ü已经tryied。 人们不应该写你的解决方案,你应该写你已经尝试过的,你的问题是什么,人们会帮助你。
看看数据表插件: https://datatables.net/
工作示例与数据表: 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
我知道它已经有一段时间,因为我张贴在这里,但我设法做到这一点,就像这样。
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
和BEHOLD中调用所有这些功能,过滤了DataTable。
希望我能帮助别人,希望我的英语至少可读。
Thxx