I have more than 10000 records in my JSON, which I want to show in the Jquery DataTable. Destroying and recreating the table takes more than 10 sec for each function.
Can someone help me optimize the DataTable population, or have any suggestions?
VMSearchDevice.searchGridListIndividual([]); // Observable binded with the datatable
_dtSearchGrid.clear(); //Clears the Table content
_dtSearchGrid.destroy(); //Destroys the table object
VMSearchDevice.searchGridListIndividual(jsonResult); //Populating the observable array
_dtSearchGrid = $('#dtSearchResult').DataTable({ //Intializing the table again
responsive: true,
"sDom": 'Rlfrtip',
"iDisplayLength": 10,
"bScrollCollapse": true,
"bPaginate": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"bSortClasses": true,
"sPaginationType": "full_numbers" // To Set Pagination
});
Try using "bDeferRender" feature of DataTables:
Deferred rendering can provide DataTables with a huge speed boost when you are using an Ajax or JS data source for the table. This option, when set to true, will cause DataTables to defer the creation of the table elements for each row until they are needed for a draw - saving a significant amount of time.
"bDeferRender": true
Related
I have implemented jQuery Datatable Grid in Angular 13. But when I delete record and datatable is refreshed. then below error occurs.
DataTables warning: table id=DataTables_Table_1 - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
Any Solution for this ??
After struggling for many hours, I found solution for this.
just add destroy:true in this.dtOptions = {} like below
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 10,
scrollX: true,
processing: true,
deferRender: true,
destroy:true
};
Error will be fixed. Thanks
I'm using the jquery DataTables plugin.
Is it possible to not load data first time?
I will load data later with different filters applied.
You could use the deferLoading Parameter and set it to 0.
This will delay the loading of data until a filter or sorting action happens.
$(document).ready(function() {
$('#example').dataTable( {
"processing": true,
"serverSide": true,
"deferLoading": 0,
"ajax": {
url:"scripts/server_processing.php",
'data': {
'dbName': 'willi'
}
}
});
});
More Info here (dataTables 1.10.0)
Is that possible to set maximum number visible rows in $('#gridId').jqxGrid({})? Currently the method is like below
`$('#gridId').jqxGrid({
source: dataAdapter,
autoheight: true,
keyboardnavigation: false,
showfilterrow: true,
filterable: true,
sortable: true,
//max number of row
});`
I am using jQWidgets v2.8.2.
You can enable the Paging feature and set the "pagesize" property. Example: jQWidgets Grid Paging
I try reuse 1 table with different amount of data based on different button click, I able to populate data successfully, but the problem is, the header did not populate correctly, I had debug and see the correct amount of column pass into table, but why it still retain the design from the 1st click? the 1st data from the 1st click have 3 column, but in the 2nd click, it still retain the same 3 column instead of 8 column? how to make the header populate correctly?
I try to destroy and recreate, but the code not working well if declare before the table create, any idea?
//if ($.fn.DataTable.fnIsDataTable($(selector)[0])) {
// $(selector).dataTable.fnClearTable();
// $(selector).dataTable.fnDraw();
//}
var oDataTable = $(selector).dataTable({
"sDom": _sDom,
"sPaginationType": "bootstrap",
"bDestroy": true,
"bServerSide": true,
"bFilter": true,
"bStateSave": true,
"bSort": tools,
"bAutoWidth": false,
"sAjaxSource": source,
"fnServerParams": function (aoData) {
aoData.push({ "name": "sParams", "value": params });
},
"bProcessing": true,
"oLanguage": {
"sLengthMenu": _displayLen
},
"aoColumns": cols
});
1st button click
2nd button click
Ok, found the answer, after fndestroy, I still need to remove header from table before recreate a new set of header
$(selector).find('thead tr th').remove();
I cannot make it to work properly.
I need on initial load to have my table sorted by 0-index column in 'desc'.
I've tried:
$(function() {
ordersTable = $('#orders').dataTable({
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType": 'full_numbers',
"bDestroy": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "{% url get_orders %}",
"aoColumnDefs":[
{"aTargets":[0], "asSorting": ["decs", "asc"]}
]
});
and what it does is sends "sSortDir_0 :'asc'" and displaying "asc" active after that.
How can it make it work? (without faking click on the column to resend the ajax)
Thanks
Ok, I guess I've found it: aaSorting and aaSortingFixed sets the initial sorting. (reference here)