我正在將下拉過濾器放入<thead></thead>. 但它不能正常作業。我網站中的搜索過濾器作業正常，但下拉過濾器無效。我什至檢查了 html 代碼以<option><select>與
這是我的<select>下拉 html 代碼：
<option value=""></option>
<option value="SK Ambong">SK Ambong</option>
<option value="SK Dudar">SK Dudar</option>
<option value="SK Kitou">SK Kitou</option>
這是我的 JS 代碼：
$('table').DataTable({
ordering: false,
initComplete: function () {
const nonSearchableColNo = [1, 6, 7, 8];
var api = this.api();
// For dropdown column
api.columns(2).every( function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.header()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^' val '$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( data, j ) {
optionVal = data.match(/SK [A-Z]\w /g);
select.append( '<option value="' optionVal '">' optionVal '</option>' )
} );
} );
}
});
uj5u.com熱心網友回復：
datatables.net檔案（和您的代碼）與完整字串匹配，因此將是“SK Dudar 1”，但您得到的是 SK [word]，例如“SK Dudar”（也如您的 所示<option>）。
"^SK Dudar$"不匹配，"SK Dudar 1"所以你沒有匹配。
改變
optionVal = data.match(/SK [A-Z]\w /g);
到
optionVal = data;
檢查其余部分是否有效，但可能無法處理看起來像附加影像的內容（未提供 html/datatables 資料，因此無法確定）
或者換
column.search(val ? '^' val '$' :...
到
column.search(val ? '^' val : ''...
（即洗掉$）
根據該資料列中的其他內容，您可能需要更改搜索正則運算式，例如
column.search(val ? '^' val '\s.?\w' : ''...
還應該將“SK Dudar”與“SK Dudar 1”匹配，而不是“SK Dudar 1 2”。
如果它不起作用，您可能需要將影像移動到不同的列中，但它與 HTML 不匹配，而是與資料表的column.searchAPI匹配。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/392421.html
標籤：javascript 查询 数据表