Возможно, есть более элегантный способ сделать это как плагин 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>
Настройте DataTables и добавьте свои пользовательские элементы для фильтрации.
$(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 из коробки.