针对数据表上的单列上的选择eption滤波器
我希望仅在DataTable上的目标列中进行选择的选项过滤器。
目前,它们针对整个数据表。您可以从此图像中看到,如果该文本恰好存在于其他列中,则可能会抛出不正确的值。
html
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<div class="select">
<select id="age">
<option value="">- Select -</option>
<option value="Tokyo">Tokyo</option>
<option value="Edinburgh">Edinburgh</option>
</select>
</div>
<div class="select">
<select id="position">
<option value="">- Select -</option>
<option value="accountant">Accountant</option>
<option value="system architect">System Architect</option>
</select>
</div>
<table id="example" class="display" style="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>
<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>System Architect</td>
<td>Tokyo</td>
<td>63</td>
<td>2011-07-25</td>
<td>$162,700</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>System Architect</td>
<td>Accountant Land</td>
<td>66</td>
<td>2009-01-12</td>
<td>$162,700</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Accountant</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012-03-29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008-11-28</td>
<td>$162,700</td>
</tr>
</tbody>
</table>
javascript
<script>
$(document).ready(function () {
var oTable = $('#example').dataTable();
$('select#age').change(function () { oTable.fnFilter($(this).val()); });
$('select#position').change(function () { oTable.fnFilter($(this).val()); });
});
</script>
可能的解决方案应考虑到我的实际数据将从Python中获取,以成为烧瓶应用程序的一部分。
可能的解决方案应考虑到我的实际数据将从Python中删除,以成为烧瓶应用程序的一部分。
I'm looking to make my select option filter only in targeted columns on a datatable.
At the moment, they target the whole datatable. You can see from this image, that this could throw up an incorrect value if that text happened to exist in a different column.
HTML
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<div class="select">
<select id="age">
<option value="">- Select -</option>
<option value="Tokyo">Tokyo</option>
<option value="Edinburgh">Edinburgh</option>
</select>
</div>
<div class="select">
<select id="position">
<option value="">- Select -</option>
<option value="accountant">Accountant</option>
<option value="system architect">System Architect</option>
</select>
</div>
<table id="example" class="display" style="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>
<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>System Architect</td>
<td>Tokyo</td>
<td>63</td>
<td>2011-07-25</td>
<td>$162,700</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>System Architect</td>
<td>Accountant Land</td>
<td>66</td>
<td>2009-01-12</td>
<td>$162,700</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Accountant</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012-03-29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008-11-28</td>
<td>$162,700</td>
</tr>
</tbody>
</table>
JavaScript
<script>
$(document).ready(function () {
var oTable = $('#example').dataTable();
$('select#age').change(function () { oTable.fnFilter($(this).val()); });
$('select#position').change(function () { oTable.fnFilter($(this).val()); });
});
</script>
Possible solutions should take into account that my actual data will be pulled in from python to be part of a flask app.
Possible solutions should take into account that my actual data will be pulled in from python to be part of a flask app.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论