Is there a way to call colReorder to order columns, externally like order when clicking on a button?

sirishnukala

Hi, First of all, Thank you for giving the community a great tool. Its robust and flexible. I really love it..!!

Jumping into my question, I was able to integrate colReorder and someother available plugins into my datatable, but facing issues when I'm trying to reorder columns in the datatable externally (through a method call). This is my code -

             var oTable = $('#testtable')
                .DataTable(
                        {

                            "aLengthMenu" : [
                                    [ 1, 5, 10, 25, 50, 100, -1 ],
                                    [ 1, 5, 10, 25, 50, 100, "All" ] ],
                            "iDisplayLength" : 25,
                            "bAutoWidth" : true,
                            //"scrollX": true,
                            //"width":100%,
                            "aoColumnDefs" : [
                                    {
                                        "sWidth" : "15%",
                                        "aTargets" : [ 0 ]
                                    },
                                    /*  {"sWidth": "10%", "aTargets": [ 1 ] },
                                     {"sWidth": "10%", "aTargets": [ 2 ] },
                                     {"sWidth": "10%", "aTargets": [ 3 ] },
                                     {"sWidth": "10%", "aTargets": [ 4 ] },
                                     {"sWidth": "10%", "aTargets": [ 5 ] },
                                     {"sWidth": "15%", "aTargets": [ 6 ] }, */

                                    {
                                        "sClass" : "align-left",
                                        "aTargets" : [ 0 ]
                                    },
                                    {
                                        "bVisible" : false,
                                        "aTargets" : [ 11, 12, 13, 14, 15,
                                                16, 17, 18, 19, 20, 21, 22,
                                                23, 24, 25, 26, 27, 28, 29,
                                                30, 31,32 ]
                                    } ],
                            "sDom" : 'R<"row"<"col-xs-4"l><"col-xs-4"f><"col-xs-4 saveas_div align-right"T>r>t<"row"<"col-xs-6"i><"col-xs-6"p>>',
                            "oTableTools" : {
                                "aButtons" : [ {
                                    "sExtends" : 'csv',
                                    "sButtonText" : 'Export as CSV',
                                    "mColumns" : "visible"
                                } ]
                            },
                            /* "aoColumns" : [ {
                                "bSortable" : true
                            }, null, null, null, null, null, {
                                "bSortable" : true
                            } ], */
                            "bStateSave" : true,
                            "fnStateSave" : function(oSettings, oData) {
                                localStorage.setItem('DataTables_'
                                        + window.location.pathname, JSON
                                        .stringify(oData));
                            },
                            "fnStateLoad" : function(oSettings) {
                                return JSON
                                        .parse(localStorage
                                                .getItem('DataTables_'
                                                        + window.location.pathname));
                            }});

I'm trying to reorder columns like doing a call like this and errors out.

$.fn.dataTable.ColReorder( '#currentProjects-table' ).fnOrder( [1, 0, 2, 3, 4] ); // Not working and gives me a error

Error from console - TypeError: this._fnConstruct is not a function

Can you please help me find a better way to call this method ?

• Sirish

allan

I'd suggest you have a look at the documentation for how to use fnOrder - http://datatables.net/extensions/colreorder/api . Click the "view details" option for a code example. Note that you need to use new.

Allan

sirishnukala

Thank you allan. I made it to work, but however I see some performance issues when I apply the colReorder - fnOrder function. I'm using dataTable with the following plugins -

1> TableTools
2> ColumnFilter
3> ColReorder

The first two plugins are very well integrated, but when applying the third one and testing, I see that the datatables.min.js has issues and keep on seeing the "stop script" popup.

Can you help me understand the best way to integrate this and below is the code for your reference.

Any help / suggestions are greatly appreciated. Many thanks again.

    var oTable = $('#test-table')
                .dataTable({
                            "aLengthMenu" : [
                                    [ 1, 5, 10, 25, 50, 100, -1 ],
                                    [ 1, 5, 10, 25, 50, 100, "All" ] ],
                            "iDisplayLength" : 25,
                            "bAutoWidth" : true,
                            "aoColumnDefs" : [
                                    {
                                        "sWidth" : "15%",
                                        "aTargets" : [ 0 ]
                                    },
                                    {
                                        "sClass" : "align-left",
                                        "aTargets" : [ 0 ]
                                    }
                                    ],
                            "sDom" : '<"row"<"col-xs-2"l><"col-xs-4 filter_templates"><"col-xs-2 save_filter_template"><"col-xs-2"f><"col-xs-1 hide_unhide_table_fitler"><"col-xs-1 saveas_div align-right"T>r>t<"row"<"col-xs-6"i><"col-xs-6"p>>',
                            "oTableTools" : {
                                "aButtons" : [ {
                                    "sExtends" : 'csv',
                                    "sButtonText" : 'Export as CSV',
                                    "mColumns" : "visible"
                                } ]
                            },

                            "bStateSave" : false,
                            "fnStateSave" : function(oSettings, oData) {
                                localStorage.setItem('DataTables_'
                                        + window.location.pathname, JSON
                                        .stringify(oData));
                            },
                            "fnStateLoad" : function(oSettings) {
                                return JSON
                                        .parse(localStorage
                                                .getItem('DataTables_'
                                                        + window.location.pathname));
                            }

                    }).columnFilter({   sPlaceHolder: "head:before",

                        aoColumns: [ { type: "text",bRegex:true },{ type: "select",multiple:true },{ type: "date-range" },{ type: "date-range" },{ type: "date-range" },{ type: "date-range" },
                                     { type: "date-range" },{ type: "date-range" },{ type: "date-range" },{ type: "date-range" },{ type: "date-range" },
                                    { type: "text",bRegex:true },{ type: "text",bRegex:true },{ type: "text",bRegex:true },{ type: "text",bRegex:true },{ type: "text",bRegex:true },{ type: "text",bRegex:true },{ type: "text",bRegex:true },
                                    { type: "select" },
                                    { type: "text",bRegex:true },{ type: "text",bRegex:true },{ type: "select",multiple:true },{ type: "select",multiple:true },{ type: "select" },{ type: "text",bRegex:true }
                                    ,{ type: "text",bRegex:true },{ type: "text",bRegex:true },
                                    { type: "text",bRegex:true },{ type: "text",bRegex:true },{ type: "text",bRegex:true },{ type: "text",bRegex:true },{ type: "text",bRegex:true },{ type: "select" },{ type: "text",bRegex:true }
                                    ]
                                    });

    // OnClick on a button, I'm showing / hiding columns as selected by the user and ordering them as per user's preference

     $("#filterBtn").on('click', function(e) {

            e.preventDefault();

            // get list of th from the table
            // do the search
            // sort the columns

            var colOrderArray = [];
            var colVisibleArray = [];
            var colCounter = 0;
            var order = [];

            var test = oTable.fnSettings().aoColumns.length;
            //console.log(test);

            $('#selected_ul_list li').each(function(){
                //column1RelArray.push($(this).attr('rel'));

                //colOrderArray[dataColumn] = colCounter;

                var dataColumn = $(this).attr('data-column');

                if(!(typeof dataColumn === "undefined"))
                    {

                            //console.log('dataColumn >>'+dataColumn);

                            //order = order+','+dataColumn;

                            colOrderArray[colCounter] = dataColumn;
                            colVisibleArray[dataColumn] = colCounter;
                            colCounter++;
                    }
            });

            for(var i=0; i<test;i++)
                {

                var tempVal = colVisibleArray[i];

                if(!(typeof tempVal === "undefined"))
                    {
                        oTable.fnSetColumnVis( i,true);

                    }
                else
                    oTable.fnSetColumnVis( i,false);


                }

            //oTable.fnDraw();

            //var colReorder = new $.fn.dataTable.ColReorder( oTable );
            //colReorder.fnOrder( colOrderArray );

            oTable.fnDraw();

        });