提问人:Sahin Ahmed 提问时间:7/25/2023 更新时间:7/25/2023 访问量:27
使用 serverSide 处理 DataTable 列筛选器:true- 不工作
DataTable Column Filter Processing with serverSide: true- Not working
问:
我是 ausind datable serverSide true,但是当使用列过滤器时,它不起作用,有什么方法可以使 clumn 过滤器与服务器端一起工作。.
工作代码: $(document).ready(函数 () {
// Setup - add a text input to each footer cell
$('#member_list thead tr')
.clone(true)
.addClass('filters')
.appendTo('#member_list thead');
// table denoted
var table = $('#member_list').DataTable({
orderCellsTop: true,
fixedHeader: true,
"search": {
"regex": true
},
processing: true,
// serverSide: true,// NOW IT IS WORKING BUT I WANT SERVERSIDE PROCESS
ajax: {
url: './elements/ssp/use-data.php',
type: 'POST'
},
dom: '<"row text-left"<"col-md-2"B><"col-md-4"l><"col-md-6""fr>>t<"text-light"i>p',
"scrollX": true,
buttons: [
'excel', 'print', 'selectAll', 'selectNone',
],
language: {
buttons: {
selectAll: '<input type="checkbox" checked>',
selectNone: 'x',
}
},
select: {
style: 'multi',
selector: 'td:first-child'
},
"lengthMenu": [
[10, 100, 500, 1000],
[10, 100, 500, 1000]
],
initComplete: function () {
var api = this.api();
// For each column
api.columns().eq(0).each(function (colIdx) {
// Set the header cell to contain the input element
var cell = $('.filters th').eq($(api.column(colIdx).header()).index());
var title = $(cell).text();
$(cell).html('<input type="text" placeholder="' + title + '" />');
// On every keypress in this input
$('input', $('.filters th').eq($(api.column(colIdx).header()).index()))
.off('keyup change')
.on('keyup change', function (e) {
e.stopPropagation();
// Get the search value
$(this).attr('title', $(this).val());
var regexr = '({search})'; //$(this).parents('th').find('select').val();
console.log('regexr:'+regexr+ 'value:'+ $(this).attr('title', $(this).val()));
var cursorPosition = this.selectionStart;
// Search the column for that value
api
.column(colIdx)
.search((this.value != "") ? regexr.replace('{search}', '(((' + this.value + ')))') : "", this.value != "", this.value == "")
.draw();
$(this).focus()[0].setSelectionRange(cursorPosition, cursorPosition);
});
});
},
});
// table.buttons().container()
// .appendTo($('.col-sm-6:eq(0)', table.table().container()));
});
</script>
非工作代码:
$(document).ready(函数 () {
// Setup - add a text input to each footer cell
$('#member_list thead tr')
.clone(true)
.addClass('filters')
.appendTo('#member_list thead');
// table denoted
var table = $('#member_list').DataTable({
orderCellsTop: true,
fixedHeader: true,
"search": {
"regex": true
},
processing: true,
serverSide: true,// NOT WORKING BUT I WANT SERVERSIDE PROCESS
ajax: {
url: './elements/ssp/use-data.php',
type: 'POST'
},
dom: '<"row text-left"<"col-md-2"B><"col-md-4"l><"col-md-6""fr>>t<"text-light"i>p',
"scrollX": true,
buttons: [
'excel', 'print', 'selectAll', 'selectNone',
],
language: {
buttons: {
selectAll: '<input type="checkbox" checked>',
selectNone: 'x',
}
},
select: {
style: 'multi',
selector: 'td:first-child'
},
"lengthMenu": [
[10, 100, 500, 1000],
[10, 100, 500, 1000]
],
initComplete: function () {
var api = this.api();
// For each column
api.columns().eq(0).each(function (colIdx) {
// Set the header cell to contain the input element
var cell = $('.filters th').eq($(api.column(colIdx).header()).index());
var title = $(cell).text();
$(cell).html('<input type="text" placeholder="' + title + '" />');
// On every keypress in this input
$('input', $('.filters th').eq($(api.column(colIdx).header()).index()))
.off('keyup change')
.on('keyup change', function (e) {
e.stopPropagation();
// Get the search value
$(this).attr('title', $(this).val());
var regexr = '({search})'; //$(this).parents('th').find('select').val();
console.log('regexr:'+regexr+ 'value:'+ $(this).attr('title', $(this).val()));
var cursorPosition = this.selectionStart;
// Search the column for that value
api
.column(colIdx)
.search((this.value != "") ? regexr.replace('{search}', '(((' + this.value + ')))') : "", this.value != "", this.value == "")
.draw();
$(this).focus()[0].setSelectionRange(cursorPosition, cursorPosition);
});
});
},
});
// table.buttons().container()
// .appendTo($('.col-sm-6:eq(0)', table.table().container()));
});
</script>
ServerSide:true----- not woking 没有 ServerSide,事情就很糟糕
但是我想在服务器端进程中处理事情,以便减少大量数据的初始加载时间。
答: 暂无答案
评论