在我的有角度的应用程序中,我正在使用具有以下选项的数据表。
strategyDatatbleOptions = {
sDom: 'rt<"bottom"p>',
ajax: (data, callback, settings) => {
this.strategyDataService.getStrategiesData().subscribe((data) => {
data = data.json().data;
if (data == undefined) {
data = [];
}
callback({
aaData: data,
})
})
},
columns: [
{
data: 'name', 'width': '10%'
},
{
data: 'executor.name', 'width': '10%',
render: function (data, type, row) {
if (data) {
return data
} else {
return null;
}
}
},
{
data: 'account.brokerId', 'width': '10%'
},
{
data: 'properties', 'width': '15%'
},
{
data: 'capital', 'width': '15%'
},
{
data: 'createTime', 'width': '15%'
},
{
data: 'updateTime', 'width': '15%'
},
{
data: null, 'width': '10%',
orderable: false,
className: 'editcenter',
defaultContent:
'<a class="clone_save"> <i class="fa fa-clone"></i></a>',
responsivePriority: 2
},
{
data: 'active', 'width': '5%',
render: function (data, type, row) {
if (data) {
// return data;
return '<form class="smart-form"><label class="toggle"><input id="contracts" type="checkbox" name="checkbox-toggle" checked="checked" /><i style="border-radius: 0px;top :2px;;" data-swchon-text="ON" data-swchoff-text="OFF"></i></label></form>';
} else {
// return data;
return '<form class="smart-form"><label class="toggle"><input id="contracts" type="checkbox" name="checkbox-toggle" /><i style="border-radius: 0px;top :2px;;" data-swchon-text="ON" data-swchoff-text="OFF"></i></label></form>';
}
},
"targets": 2
}
],
rowCallback: (row: Node, data: any | Object, index: number) => {
$('input', row).unbind('click');
$('input', row).bind('click', () => {
let toggleSwitch = event.target as any;
let status = toggleSwitch.checked;
this.strategyDataService.changeStrategyStatus(data.name, status).subscribe(response => response.code);
});
//Clone Strategy
$('a.clone_save', row).unbind('click');
$('a.clone_save', row).bind('click', () => {
this.cloneStrategy(data);
})
},
"pageLength": 2
}
现在在html模板中,我有自己的搜索字段,看起来像这样
此搜索字段将按列搜索并返回结果。
搜索结果代码
columnSearch() {
if ($.fn.DataTable.isDataTable('#strategyDataTable table')) {
var table = $('#strategyDataTable table').DataTable({
orderCellsTop: true,
fixedHeader: true,
stateSave: true,
retrieve: true,
});
}
$('#strategyDataTable thead').on('click', 'th', function () {
let colIndex = $(this).closest("th").index()
$('input.filter', this).on('keyup change', function () {
if (table.column(colIndex).search() !== this.value) {
table
.column(colIndex)
.search(this.value)
.draw();
}
});
})
}
现在,此数据表中每页有2行,这里的问题是,如果我在第一页中搜索某些内容。如果关键字匹配,它也会从第二页返回结果。我只希望从我选择的页面获得结果,而不是其他页面。 If关键字仅匹配两行中的一行,也匹配其他页面行。它只应显示一个结果。没有其他网页结果。