Change Columns Data after AJAX search

Change Columns Data after AJAX search

kevinjtkevinjt Posts: 6Questions: 1Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 12,604Questions: 0Answers: 2,154

    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.

  • kevinjtkevinjt Posts: 6Questions: 1Answers: 0

    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.

  • colincolin Posts: 12,604Questions: 0Answers: 2,154

    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

  • kevinjtkevinjt Posts: 6Questions: 1Answers: 0

    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

  • kthorngrenkthorngren Posts: 13,779Questions: 25Answers: 3,242

    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

  • kevinjtkevinjt Posts: 6Questions: 1Answers: 0

    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

  • kthorngrenkthorngren Posts: 13,779Questions: 25Answers: 3,242
    Answer ✓

    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

  • kevinjtkevinjt Posts: 6Questions: 1Answers: 0

    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

  • kevinjtkevinjt Posts: 6Questions: 1Answers: 0

    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

Sign In or Register to comment.