Custom filter data with large data have a bit slower
Custom filter data with large data have a bit slower
spyhunter88
Posts: 3Questions: 1Answers: 0
I upgrade my DataTable from 1.9.4 to 1.10b2 and found the custom filter is slower, also it hang firefox a little while redraw the table.
My situation: I try to filter Status column with a Select box right after when user change the selection. I have 16 columns and about 15.000 of rows each time.
In previous, I use fnFilter in onchange function:
[code]
$('#filterStatus').on('change', function() {
var strKey = $('#filterStatus option:selected').val() + '';
if (strKey == '0') mobileDraftTable.fnFilterClear('');
else mobileDraftTable.fnFilter(strKey, 15);
})
[/code]
In latest beta version, I try with:
[code]
$('#filterStatus').on('change', function() {
var strKey = $('#filterStatus option:selected').val() + '';
var filteredData = mobileDraftTable
.column( 15 )
.data()
.filter(function ( value, index ) {
return (strKey == '0' || value == strKey) ? true : false;
});
})
[/code]
But it doesn't work, I don't know I have the right knowledge about the filter function in here. But the following solution make it work, but a bit slower.
[code]
// Set custom filter
$.fn.dataTable.ext.search.push(function( settings, data, dataIndex ) {
// var filterStatus = $('#filterStatus option:selected').val() + '';
var status = data[15]; // use data for the status column
return (filterStatus == '0' || status == filterStatus) ? true : false;
});
$('#filterStatus').on('change', function() {
var filterStatus = $('#filterStatus option:selected').val() + '';
mobileDraftTable.draw();
})
[/code]
Am I follow the right method to custom filter in new DataTable ?
Update: maybe it take double time when ajax.reload(), so the "unresponsive script" Dialog appears in Firefox when first load or ajax.load().
My situation: I try to filter Status column with a Select box right after when user change the selection. I have 16 columns and about 15.000 of rows each time.
In previous, I use fnFilter in onchange function:
[code]
$('#filterStatus').on('change', function() {
var strKey = $('#filterStatus option:selected').val() + '';
if (strKey == '0') mobileDraftTable.fnFilterClear('');
else mobileDraftTable.fnFilter(strKey, 15);
})
[/code]
In latest beta version, I try with:
[code]
$('#filterStatus').on('change', function() {
var strKey = $('#filterStatus option:selected').val() + '';
var filteredData = mobileDraftTable
.column( 15 )
.data()
.filter(function ( value, index ) {
return (strKey == '0' || value == strKey) ? true : false;
});
})
[/code]
But it doesn't work, I don't know I have the right knowledge about the filter function in here. But the following solution make it work, but a bit slower.
[code]
// Set custom filter
$.fn.dataTable.ext.search.push(function( settings, data, dataIndex ) {
// var filterStatus = $('#filterStatus option:selected').val() + '';
var status = data[15]; // use data for the status column
return (filterStatus == '0' || status == filterStatus) ? true : false;
});
$('#filterStatus').on('change', function() {
var filterStatus = $('#filterStatus option:selected').val() + '';
mobileDraftTable.draw();
})
[/code]
Am I follow the right method to custom filter in new DataTable ?
Update: maybe it take double time when ajax.reload(), so the "unresponsive script" Dialog appears in Firefox when first load or ajax.load().
This discussion has been closed.