我正在使用數據表，列值是 (tag1, tag2, tag3) 逗號分隔我已經為該列創建了一個下拉過濾器該下拉列表的值類似于列值 (tag1, tag2, tag3) 逗號分隔但我需要為下拉列表中的每個選項提供一個值標簽1屋頂2標簽3等等這是代碼initComplete: function () { this.api().columns([1]).every(function () { var column = this; var select = jQuery('<select id="test-haris"><option value=""></option> < /select>') .appendTo(jQuery(column.header()).empty()) .on('change', function () { var val = jQuery.fn.dataTable.util.escapeRegex( jQuery(this).val() ); column .search(val ? '^' + val + '$' : '', true, false) .draw(); }); column.data().unique().sort().each(function (d, j) { select.append('<option value="' + d + '">' + d + '</option>') }); });}
1 回答
慕仙森
TA貢獻1827條經驗 獲得超8個贊
以下方法根據第一列的內容構建一個選擇列表（下拉列表）。
對于該列中的每個單元格，它將逗號分隔的項目拆分為單獨的文本片段，然后為下拉列表創建一個排序的唯一列表。
當您通過從下拉列表中選擇項目進行搜索時，它會檢查所選項目是否包含在該列中每個單元格的文本中的任何位置。為此，它使用自定義的 DataTables 過濾器。
就我而言，我將下拉菜單放置在表格的頁腳中 - 您可以更改它。
該表如下所示：
這是下拉菜單：
從下拉列表中選擇一個項目后，您可以看到過濾效果：
該解決方案的代碼如下 - 我已將其分成單獨的部分/函數，以嘗試使結構和方法更清晰：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" 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 , John, Nixon , </td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>John, 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, Winters , 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 , Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
// the DataTable object:
var table = $('#example').DataTable( {
select: false // or, whatever you need in here.
} );
// Setup - add a select list to first footer cell:
$('#example tfoot th').slice(0, 1).each( function () {
var dropdown = buildDropdown();
$(this).html( dropdown );
} );
// add a change event to the select list:
$('#mySelect').change(function() {
table.draw();
});
// create a custom search function for the select list,
// which finds if the selected item is contained in the cell:
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var selectedValue = $('#mySelect').val();
console.log(selectedValue);
if (data[0].includes(selectedValue)) {
return true;
} else {
return false;
}
}
);
function buildDropdown() {
var selectHtml;
// this will hold array of distinct values:
var items = [];
table.columns([0]).data().each(function (data, index) {
data.forEach(function (newItems, index) {
newItems.split(',').forEach(function (newItem, index) {
if ( newItem.trim() !== '' && items.indexOf(newItem) === -1) {
items.push(newItem.trim());
}
});
});
});
// sort and remove duplicates:
var uniqueSortedItems = [...new Set(items)].sort();
selectHtml = '<select id="mySelect"><option value=""></option>';
uniqueSortedItems.forEach(function(item) {
selectHtml = selectHtml + '<option value="' + item + '">' + item + '</option>';
});
selectHtml = selectHtml + '</select>';
return selectHtml;
}
} );
</script>
</body>
</html>
我認為這就是您想要實現的目標 - 但當然，您需要將其集成到您的特定解決方案中。
您還需要決定如何處理全局搜索功能（如果您正在使用它），因為它可能會干擾用于第一列的自定義搜索。
- 1 回答
- 0 關注
- 118 瀏覽
添加回答
舉報
0/150
提交
取消