Col reorder on click

sdinesh21

I want to reorder columns on click of buttons. The order may change as predefined for each button. Can I know how can this be done?

allan

The unreleased version of ColReorder has an API to be able to programmatically change the order: https://github.com/DataTables/ColReorder/blob/master/media/js/ColReorder.js#L490

Allan

sdinesh21

Thanks, Allan! It was helpful... On the same requirement, I am looking to replace aoColumns in the datatable with a new set of aoColumns on click of a button. The JSON from server will contain data for both set of aoColumns. I understood from forums that dynamically changing the aoColumns is not possible now. Is there an alternative for this now? Please suggest.

allan

As you say that's not possible. The only option is to destroy your table and then create a new one.

Allan

sdinesh21

Thanks again! I tried destroying the table and recreating a new one. The column data is loaded properly, however the column header does not appear in the new one. Following is the code I use to destroy and recreate. Please let me know what could be the issue.

[code]
function reCreateTableNew( aoColumnView ) {
oTable.fnDestroy();
$("#"+tblName).empty();
var aoColumns = new Array();
for ( var i in aoColumnView ) {
aoColumns.push( aoColumnView[i] );
}
loadAssetData( tblName, aoData, aoColumns);
}

function loadAssetData( tblName, servArgv, aoColumnDef) {
var oTable = $("#" + tblName).dataTable( {
"sScrollY": "300px",
"sScrollX": "200px",
"sAjaxSource": "../sevlet",
"bServerSide": true,
"bDestroy": true,
"bProcessing": true,
"bScrollCollapse": true,
"fnServerParams": function ( aoData ) {
for ( var i in servArgv ) {
aoData.push( servArgv[i] );
}
},
sDom: RfrtS',
"bFilter": true,
"aoColumns": aoColumnDef ,
"aaSorting": [[0,'asc']]
} );
}
[/code]

allan

Aside from the syntax error in sDom, it looks okay to me. We'd need a link to an example showing the problem I think.

Allan

sdinesh21

Allan,
I noticed the following snippet in one of your replies to the posts. Can you please clarify if this means aoColumns can dynamically change when I modify "cols" on a button click?

[code]
var my_cols = [ 'fname', 'lname', 'age', 'dob', 'grade' ];
var cols = [];

for ( var i=0, iLen=my_cols.length ; i

allan

> Can you please clarify if this means aoColumns can dynamically change when I modify "cols" on a button click?

No - you can't change the initialisation options of a table after it has been initialised. You need to destroy the old table and create a new one if you want to do that.

Allan