Improve performance of datatable
Improve performance of datatable
omsalam
Posts: 7Questions: 1Answers: 0
Hi everbody,
This is my datatable source code.
I use yadcf plug-in, table tools, colvis and colreorder.
I have 30 000 rows and 30 cols.
In Internet Explorer 9 with the plug-in Google Chrome Frame, performance are really good.
In firefox (V31) it is preety slow when filtering and searching some information.
Do you have any advice to increase performance, i need to get a faster datatable in a browser (IE or FF) without the plug-in google chrome frame.
Thanks
$(document).ready(function() {
var oTable;
$('#example tfoot th').each( function () {
var title = $('#example thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="'+title+'" />' );
} );
oTable = $('#example').DataTable( {
"autoWidth": true,
"processing": true,
"serverSide": false,
"deferRender": true,
"paginationType": "full_numbers",
"jQueryUI": true,
"scrollY": "600",
"scrollX": "100%",
"scrollCollapse": true,
"initComplete": function(settings, json) {
$('div.DTTT_container').appendTo("#buttonExcel");
},
"ajax": "./server_processingALL.php",
"dom": 'T<"H"lfr>Wt<"F"ip><"#tools">',
"oTableTools": {
"sSwfPath": "./tools/copy_csv_xls_pdf.swf",
"aButtons": [{
"sExtends": "xls",
"sButtonText": "Exporter sous Excel"
}]
},
"columnDefs": [ {
"targets": COL_STATEFN,
"visible": false
}, {
"targets": COL_GROUPE_ALERTE,
"visible": false
}, {
"targets": COL_LIBELLE_PMRQ,
"visible": false
}, {
"targets": COL_STATE_BANA,
"visible": false
},{
"targets": COL_STATE_FIAMETIER,
"createdCell": function (td, cellData, rowData, row, col) {
if(cellData == "Nouvelle information") {
$(td).addClass('red');
}
if(cellData == "Information prise en compte") {
$(td).addClass('green');
}
}
},
{
"targets": COL_STATUT_DISPLAY_FN,
"createdCell": function (td, cellData, rowData, row, col) {
if(cellData == "Capitalise") {
$(td).addClass('green');
}
if(cellData == "ATFN") {
$(td).addClass('red');
}
if(cellData == "En cours traitement") {
$(td).addClass('orange');
}
if(cellData == "Pas Fiche Nav") {
$(td).addClass('greenlight');
}
if(cellData == "Montee indice") {
$(td).addClass('yellow');
}
}
}, {
"targets": COL_STATUT_BANA_DISPLAY,
"createdCell": function (td, cellData, rowData, row, col) {
if(cellData == "Fiche BANA en cours") {
$(td).addClass('orange');
}
if(cellData == "Commande BANA OK") {
$(td).addClass('green');
}
}
} ],
"createdRow": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
$('td', nRow).eq(4).addClass('numeroTOTR');
},
"aLengthMenu": [[20, 50, 75, 100, 200, 500], [20, 50, 75, 100, 200, 500]],
"iDisplayLength": 20
} );
// RECHERCHE
oTable.columns().eq( 0 ).each( function ( colIdx ) {
$( 'input', oTable.column( colIdx ).footer() ).on( 'keyup change', function () {
oTable
.column( colIdx )
.search( this.value )
.draw();
} );
} );
// AFFICHER CACHER COLONNE
var colvis = new $.fn.dataTable.ColVis( oTable );
$( "div#buttonColvisID" ).append( colvis.button());
// CHANGER ORDRE COL0NNE
new $.fn.dataTable.ColReorder( oTable );
oTable.columns.adjust().draw();
yadcf.init(oTable, [
{column_number: COL_FREQUENCE,filter_type:"multi_select",select_type: 'select2',filter_container_id: "filterContent1"},
{column_number: COL_CATEGORIE,filter_type:"multi_select",select_type: 'select2',filter_container_id: "filterContent2"},
{column_number: COL_STATUT_DISPLAY_FN,filter_type:"multi_select",select_type: 'select2',filter_container_id: "filterContent3"},
{column_number: COL_DISCIPLINE_TOTR,filter_type:"multi_select",select_type: 'select2',filter_container_id: "filterContent4"},
{column_number: COL_STATUT_TOTR,filter_type:"multi_select",select_type: 'select2',filter_container_id: "filterContent5"},
{column_number: COL_PERIMETRE_FIGE,filter_type:"select",filter_default_label: "O/N",filter_container_id: "filterContent6"},
{column_number: COL_TYPE_TOTR,filter_type:"multi_select",select_type: 'select2',filter_container_id: "filterContent7"},
{column_number: COL_CODE_ARRET,filter_type:"multi_select",select_type: 'select2',filter_container_id: "filterContent8"},
{column_number: COL_STATUT_BANA_DISPLAY,filter_type:"multi_select",select_type: 'select2',filter_default_label: "Toutes",filter_container_id: "filterContent9"},
{column_number: COL_STATE_FIAMETIER,filter_type:"multi_select",select_type: 'select2',filter_container_id: "filterContent10"}
]);
This discussion has been closed.