javascript - jQuery 数据表中的下拉过滤
问题描述
链接到CodePen。
我正在为这个表使用Datatables jQuery 插件。
我正在尝试弄清楚如何在顶部实现按位置过滤器下拉菜单来工作。因此,例如,如果您从下拉列表中选择 Bracebridge,它只会显示带有 Bracebridge 的产品。我尝试过使用 Datatables 中的column().search() 函数,但很难让它工作。
HTML
<!--Filter-->
<p>Filter By Location</p>
<select id="locfilter" name="location">
<option value="">All</option>
<option value="Ajax">Ajax</option>
<option value="Barrie">Barrie</option>
<option value="Belleville">Belleville</option>
<option value="Bracebridge">Bracebridge</option>
<option value="Bradford">Bradford</option>
<option value="Brampton">Brampton</option>
<option value="Brantford">Brantford</option>
<option value="Burlington">Burlington</option>
<option value="Cambridge">Cambridge</option>
<option value="Cobourg">Cobourg</option>
<option value="Concord">Concord</option>
<option value="Gloucester">Gloucester</option>
<option value="Gormley">Gormley</option>
<option value="Guelph">Guelph</option>
<option value="Hamilton">Hamilton</option>
<option value="Kingston">Kingston</option>
<option value="London">London</option>
<option value="Milton">Milton</option>
<option value="Napanee">Napanee</option>
<option value="Niagara Falls">Niagara Falls</option>
<option value="North Bay">North Bay</option>
<option value="Ottawa">Ottawa</option>
<option value="Owen Sound">Owen Sound</option>
<option value="Peterborough">Peterborough</option>
<option value="Sarnia">Sarnia</option>
<option value="Sault Ste Marie">Sault Ste Marie</option>
<option value="Sudbury">Sudbury</option>
<option value="Timmins">Timmins</option>
<option value="Toronto">Toronto</option>
<option value="Trenton">Trenton</option>
<option value="Waterloo">Waterloo</option>
<option value="Windsor">Windsor</option>
<option value="Woodstock">Woodstock</option>
</select>
JS(只有这个片段可以拉入表格)
$(document).ready(function() {
$("#used-equip-table").DataTable();
});
解决方案
将您的 JavaScript 部分更新为:
$(document).ready(function() {
// create a variable for your table, so we can refer to it below:
var table = $("#used-equip-table").DataTable();
// add events to your drop-down control, to detect changes:
$('#locfilter').on( 'keyup change clear', function () {
table.draw();
} );
// use the following to process filter/search changes:
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var selectedValue = $('#locfilter').val();
if (data[4].includes(selectedValue)) { // 4 = the fifth column!
return true;
} else {
return false;
}
}
);
});
上面显示的该ext.search.push
功能是search
插件的一部分,在此处进行了描述。
推荐阅读
- android - 从 Kotlin 中的类更新 UI 的正确方法
- selenium - Nightwatch selenium geckodriver - 浏览器无法打开
- excel - VBA合并重复行并对具有多个条件的列求和
- python - 获取分类变量的类别列表(Python Pandas)
- android - [[15.0.4], [16.0.2]] 的库正在请求库 com.google.android.gms:play-services-measurement-base,但解析为 16.0.2
- javascript - ng-for 中的 ng-template 仅创建 1 次
- json - sed 用于字典关键字
- json - Json_encode 和 json_decode 到 textarea - 换行问题
- apache-spark - 使用 PySpark 读取和处理 *.tar.gz 文件
- html - 页脚部分与正文内容重叠