我有一個 DataTables 實體，它在表的標題中附加了一個選擇。這是一個顯示它的代碼筆。
這是將選擇添加到標題的相關代碼部分
initComplete: function () {
count = 0;
this.api().columns().every(function () {
var title = this.header();
//replace spaces with dashes
title = $(title).html().replace(/[\W]/g, '-');
var column = this;
var select = $('<br><select id="' title '" ></select>')
.appendTo($(column.header()))
.on('change', function () {
//Get the "text" property from each selected data
//regex escape the value and store in array
var data = $.map($(this).select2('data'), function (value, key) {
return value.text ? '^' $.fn.dataTable.util.escapeRegex(value.text) '$' : null;
});
//if no data selected use ""
if (data.length === 0) {
data = [""];
}
//join array into string with regex or (|)
var val = data.join('|');
//search for the option(s) selected
column
.search(val ? val : '', true, false)
.draw();
});
//unique, tipo group by
//sorte deixa em ordem abcd
column.data().unique().sort().each(function (d, j) {
select.append('<option value="' d '">' d '</option>');
});
//use column title as selector and placeholder
$('#' title).select2({
multiple: true,
closeOnSelect: false,
placeholder: "Select a " title
});
//initially clear select otherwise first option is selected
$('.select2').val(null).trigger('change');
});
}
但是我注意到將它放在標題中的一個缺點是，當我單擊選擇時，DataTables 認為我正在按該列排序。如果我在選擇（其 ID 等于列名）內單擊，有沒有辦法不對列進行排序
uj5u.com熱心網友回復：
有兩種方法可以做到。
首先是完全禁用點擊排序。只需將其放入您的表格選項中：
ordering: false,
另一種選擇是在標題中有兩行。第一行應該是th列標題，第二行應該是td單元格內的下拉過濾器。這是因為 DataTablesth為排序箭頭在單元格內保留了一個空間，即使它們不存在。
<thead>
<tr>
<th>Demanda</th>
<th>Título</th>
<th>Solicitante</th>
<th>Data Inclusao</th>
<th>área</th>
<th>SP</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
您需要將您的更改appendTo()為這樣的：
.appendTo($(`#example thead tr:eq(1) td`).eq(this.index()))
然后在你的表格選項中你可以設定
orderCellsTop: true,
當您單擊頂部標題行并從第二個標題行的下拉串列中進行過濾時，這將允許進行排序。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/349534.html
上一篇：在產品類別頁面中顯示隨機影像