作为 JQuery 和 DataTables 插件，可能有一种更优雅的方式来执行此操作，但这很简单且有效。
这是一个表格的 HTML：
<table style="width:100%;border-collapse:collapse;border:solid 1px black;">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr data-region="1" data-subregion="a">
<td>Region 1</td>
<td>Sub-Region A</td>
</tr>
<tr data-region="1" data-subregion="b">
<td>Region 1</td>
<td>Sub-Region B</td>
</tr>
<tr data-region="2" data-subregion="a">
<td>Region 2</td>
<td>Sub-Region A</td>
</tr>
<tr data-region="2" data-subregion="b">
<td>Region 2</td>
<td>Sub-Region B</td>
</tr>
<tr data-region="2" data-subregion="c">
<td>Region 2</td>
<td>Sub-Region C</td>
</tr>
<tr data-region="3" data-subregion="a">
<td>Region 3</td>
<td>Sub-Region A</td>
</tr>
</tbody>
</table>
配置数据表并添加您的自定义元素以进行过滤。
$(document).ready(function(){
// Execute the DataTables API on the table(s)
$('table').DataTable();
// give the DataTables API a moment to finish drawing elements to the DOM
setTimeout(function(){
// Just adding some Dropdown lists, but you can add a custom search box
// this first one filters by the data-region attribute
var regionFilter = $('<select data-filter="region">'
+ '<option value="0">All Regions</option>'
+ '<option value="1">Region 1</option>'
+ '<option value="2">Region 2</option>'
+ '<option value="3">Region 3</option>'
+ '</select>');
// this second one filters by the data-subregion attribute
var subregionFilter = $('<select data-filter="subregion">'
+ '<option value="0">All Sub-Regions</option>'
+ '<option value="a">Sub-Region A</option>'
+ '<option value="b">Sub-Region B</option>'
+ '<option value="c">Sub-Region C</option>'
+ '</select>');
// prepend the dropdown lists into the dataTables_filter container
// optionally, you can overwrite the default search box that the DataTables API places here
$('.dataTables_filter').prepend(regionFilter);
$('.dataTables_filter').prepend(subregionFilter);
// give your own HTML a moment to draw to the DOM
setTimeout(function(){
// configure the selection to trigger the filter action
$('select[data-filter]').on('change', function(){
// the <select> element has a data-filter attribute which defines which attribute to search the table for
var dataFilter = $(this).attr('data-filter');
var keyword = $('select[data-filter="' + dataFilter + '"] option:selected').val();
// execute the search
searchDataAttributes(dataFilter, keyword);
});
}, 300);
}, 400);
});
创建您自己的搜索实现
// This search is very simple - you can implement any type of search you like
function searchDataAttributes(attribute, keyword) {
// put together the attribute to search
var dataAttribute = 'data-' + attribute;
// the value 0 is being used to show all
if (keyword=='0') {
$('tbody tr').show();
return true;
}
// if the keyword is not 0, then look at the attributes of each row in the table
$('tbody tr').each(function(){
var attributeValue = $(this).attr(dataAttribute);
// if the value of the attribute in the row matches the value of the keyword, then show the row
if (attributeValue==keyword) {
console.log('show');
$(this).show();
} else {
console.log('hide');
$(this).hide();
}
});
}
这是一个简单的下拉列表过滤器。您可以将搜索框替换为您自己的自定义搜索框，按照您想要的方式进行搜索。如果您不想，您根本不必让 DataTables 绘制它们的搜索框。这只是绕过 DataTables 限制的一种方法。