Change Columns Data after AJAX search

kevinjt

Hello, I have a datatable like the following:

var table_customer = $('#table_customer').DataTable({
        "dom": "ltip",
        "colReorder": true,
        "bAutoWidth": false,
        'processing': true,
        'serverSide': true,
        'serverMethod': 'post',
        'ajax': {
            'url':"http://localhost:8000/search",
            'data': function(data){
                var search_string = $('#customsearch').val();
                data.search_string = search_string;
            }
        },
        'columns': [{ title: 'Title 1', data : 'Data1'},
                    { title: 'Title 2', data : 'Data2'},
                    { title: 'Title 3', data : 'Data3'},
                    { title: 'Title 4', data : 'Data4'},
                    { title: 'Title 5', data : 'Data5'},
                    { title: 'Title 6', data : 'Data6'},
                    { title: 'Title 7', data : 'Data7'},
                    { title: 'Title 8', data : 'Data8'},
                    { title: 'Title 9', data : 'Data9'}, 
                    { "data" : null, "orderable" : false, "defaultContent": '<form action="http://localhost:8000/customer/aaa" method="post" class="form_delete_customer"><button type="button" href="javascript:void()" onclick="confirm(\'Confirm delete this customer?\') ? this.parentElement.submit() : \'\'" class="btn btn-danger delete-customer">Delete</button></form>'
            }
        ]
    });

Is there a way for me to change Data1 to Data9 dynamically after AJAX search depending on the column order in AJAX result? For example, Title 1 corresponds to Data9, Title 2 corresponds to Data8 and so on.

Thank you

colin

There's no way to flip it as such, but rowCallback is called each time a row is drawn - you could create a function in there to flip over the data values as required,

Colin

p.s. apologies for you having to post twice, the spam filter took offence to your posts for some reason.

kevinjt

Thank you for your fast response. What is the command to set the columns data inside rowCallback? I tried these to try to set only the first column:

table_customer.column(0).data('Data9');
table_customer.columns([0]).data('Data9');

But both of these do not change anything.

colin

This is an example here - http://live.datatables.net/hoduhule/1/edit - it's changing the second column to be date/time when the column was drawn. Hopefully that'll help!

Colin

kevinjt

Hi Colin,

I tried to switch Data1 and Data2 so 'Title 1' corresponds to Data2 and 'Title 2' corresponds to Data1 using this code inside rowCallback:

"rowCallback": function( row, data ) {
            const result = data;
            var counter = 0;
            for(var k in result) {
                table_customer.cell(row, counter).data(result[k]);
                counter++;
            }
        }

After I performed a search, I was able to change 'Title 1' to correspond to Data2. However, 'Title 2' now also corresponds to Data2. I also debug the code and the value of field 'Title 2' is also Data2 even though during the first iteration, the original value was Data1. Is there anything I'm doing wrong?

Thank you,

Kevin

kthorngren

I might not be understanding what you are trying to do but if you want to swap two values you wouldn't use a loop. You would just save the two values to swap then apply them to their new columns. Like this:
http://live.datatables.net/jocaxehe/1/edit

Kevin

kevinjt

Hello kthorngren,

I'm trying to show the search result while preserving the column order of the search result. When the webpage first loaded, the column may be in sequence. However, after searching, the order of column retrieved from database may be changed.

But it seems that after I declared the columns.data, then I cannot change the order of the column values. Is this correct?

Thank you

kthorngren

Maybe this will help:

Setting columns.data is set only at initialization. If you need to change the order of the columns then the Datatable needs to be reinitialized.

Instead of returning object based data maybe you can return array based data and not use columns.data. This way Datatables will display the column order based on the order returned not the order defined at initialization. Like this server side example.

Kevin

kevinjt

Hi kthorngren,

I ended up calling a separate ajax to detect whether there are changed in the column order. If there are changes, I retrieve the new column order results then place this result inside columns.data & then reinitialise the table.

Now it works as I wanted. Thanks for your suggestion!

Kevin

kevinjt

Hi kthorngren,

I ended up calling a separate ajax to detect whether there are changed in the column order. If there are changes, I retrieve the new column order results then place this result inside columns.data & then reinitialise the table.

Now it works as I wanted. Thanks for your suggestion!

Kevin