Col reorder on click

Col reorder on click

sdinesh21sdinesh21 Posts: 37Questions: 0Answers: 0
edited September 2013 in Plug-ins
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?

Replies

  • allanallan Posts: 55,076Questions: 1Answers: 8,645 Site admin
    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
  • sdinesh21sdinesh21 Posts: 37Questions: 0Answers: 0
    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.
  • allanallan Posts: 55,076Questions: 1Answers: 8,645 Site admin
    As you say that's not possible. The only option is to destroy your table and then create a new one.

    Allan
  • sdinesh21sdinesh21 Posts: 37Questions: 0Answers: 0
    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]
  • allanallan Posts: 55,076Questions: 1Answers: 8,645 Site admin
    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
  • sdinesh21sdinesh21 Posts: 37Questions: 0Answers: 0
    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
  • allanallan Posts: 55,076Questions: 1Answers: 8,645 Site admin
    > 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
This discussion has been closed.