I have a DataTable on my page which is initialized with no data and is using server side, I'm using this to return no data:
ajax: function(data, callback) {
if (data.draw == 1) {
callback({
'draw': 1,
'recordsTotal': 0,
'recordsFiltered': 0,
'data': []
});
return;
}
var column = data.columns[data.order[0].column].data;
var dir = data.order[0].dir;
$.ajax({
url: '/ssp/server_processing.php',
type: 'GET',
contentType: "application/json; charset=utf-8",
dataType: 'json',
async: true,
data: JSON.stringify(data)
}).done(function(data) {
callback(data); //here I' adding extra data
if (!added) {
new $.fn.dataTable.FixedHeader(table);
added = true;
}
$("span#gridLoading").hide();
});
},
I'm returning empty array when data.draw==1
My table is reloaded from external button click, so I would like to disable searching, sorting and page size change until my table will have data.
For now I'm disabling page size change using this:
drawCallback: function(settings) {
if (settings.aoData.length > 0) {
$(this).closest('.dataTables_wrapper').find('.dataTables_length select').prop('disabled', false);
} else {
$(this).closest('.dataTables_wrapper').find('.dataTables_length select').prop('disabled', 'disabled');
}
}
but maybe there is an easier way to do this?
I think that this should be done "by-design" and should be build-in by default.
So my question is: How can I disable sorting, page size change and search when table has no data.
Here is JS Bin to play: http://live.datatables.net/forakuzu/1/edit