I have an SQL table with 36,000 records to be displayed in the Datatables list. Pagination works well, as I develop it like this:
var table = $('.datatable').DataTable({
pageLength : 20,
lengthChange : false,
processing : true,
serverSide : true,
ajax : {
url :"ajax.php",
type: "post",
}
});
In my ajax.php file, I just echo my lines (JSON encoded), according to the limit set by the page number.
The problem is the built-in filtering, and the search no longer works. When I want to filter a column, the βProcessingβ layer appears and then disappears, but my data is βthe same. When I want to examine through a table, nothing happens.
So here are my questions:
- How to restore search and filtering?
- How to filter and search by all lines (not only those that are displayed)? With Ajax, yes, but how is it in jQuery?
thanks in advance
:
, .
:
var table = $('.datatable').DataTable({
pageLength : 20,
lengthChange : false,
processing : true,
serverSide : true,
ajax : {
data : function(d) {
d.searching = get_search($('.datatable'));
},
url :"ajax.php",
type: "post",
},
searching : false,
});
$('.datatable thead th').each(function() {
var title = $(this).data('name');
$('.datatable').find('tfoot tr').append('<td><input type="text" name="'+title+'"/></td>');
});
table.columns().every(function() {
var that = this;
$('input', this.footer()).on('keyup', function(e) {
that.search(this.value).draw();
}
});
function get_search(datatable) {
var result = [];
datatable.find('tfoot').find('input').each(function() {
result.push([$(this).attr('name'), $(this).val()]);
});
return result;
}
:
$('.datatable').find('th').click(function() {
var item = $(this);
removeClasses($('.datatable'), item.index());
if(item.hasClass('sorting_asc')) {
item.removeClass('selected_asc').addClass('selected_desc');
} else {
item.removeClass('selected_desc').addClass('selected_asc');
}
});
function get_sorting(datatable) {
var result = false;
datatable.find('th').each(function() {
var item = $(this);
var name = item.data('name');
if(item.hasClass('selected_asc')) {
result = name+' ASC';
} else if(item.hasClass('selected_desc')) {
result = name+' DESC';
} else {
}
});
return result;
}
function removeClasses(datatable, index) {
datatable.find('th').each(function() {
if($(this).index() !== index) {
$(this).removeClass().addClass('sorting');
}
});
}