我尝试用以下代码创建单独的搜索字段。
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<h1>DataTables Server Side</h1>
Seacrch specific column : <input id="column3_search" type="text"/>
<table id="example" class="display nowrap" style="width:100%; background-color: black; color: white;">
<thead>
<tr>
<th>Column A</th>
<th>Column B</th>
<th>Column C</th>
<th>Column D</th>
</tr>
</thead>
</table>
</body>
<!-- DataTable Pagination-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.21/r-2.2.5/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.21/r-2.2.5/datatables.min.js"></script>
</html>
<script>
$(document).ready(function() {
var table = $('#example').DataTable({
bProcessing: true,
bServerSide: true,
deferRender: true,
sPaginationType: "full_numbers",
lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
bjQueryUI: true,
sAjaxSource: 'load_table_data',
columns: [
{"data": "Column A"},
{"data": "Column B"},
{"data": "Column C"},
{"data": "Column D"}
]
});
$('#column3_search').on( 'keyup', function () {
table.columns(1)
.search( this.value )
.draw();
} );
} );
</script>
我将指定为列索引1的搜索字段，但是当我搜索它时，不执行任何搜索，只显示一秒钟的处理和完成。
当我将.column()移出并尝试使用此代码进行搜索时。
$('#column3_search').on( 'keyup', function () {
table.columns(1)
.search( this.value )
.draw();
} );
它通过搜索表中的所有列来正常工作。 那么这段代码有什么问题，我该如何修复它。
这是我的table_schemas。
SERVERSIDE_TABLE_COLUMNS = [
{
"data_name": "A",
"column_name": "Column A",
"default": "",
"order": 1,
"searchable": True
},
{
"data_name": "B",
"column_name": "Column B",
"default": "",
"order": 2,
"searchable": True
},
{
"data_name": "C",
"column_name": "Column C",
"default": 0,
"order": 3,
"searchable": True
},
{
"data_name": "D",
"column_name": "Column D",
"default": 0,
"order": 4,
"searchable": True
}
]
您需要在column属性中定义target和searchable属性。
columns: [
{"data": "Column A","targets":0,"searchable":true},
{"data": "Column B","targets":1,"searchable":true},
{"data": "Column C","targets":2,"searchable":true},
{"data": "Column D","targets":3,"searchable":true}
]
$("#column3_search").on("input", function (e) {
table.columns(1).search($(this).val()).draw();
});
search()方法返回一个字符串，如果要在数据表中仅显示该字符串，则应添加一个filter，然后添加draw:
null
$('#column3_search').on('keyup', function() {
let string = $(this).val();
table.columns(1).data().filter(function(value, index) {
return value === string ? true : false;
}).draw();
});