TH problem Ajax, DB and column reorder using select / on change

TH problem Ajax, DB and column reorder using select / on change

lenamtllenamtl Posts: 265Questions: 65Answers: 1
edited October 2017 in Free community support

I'm using this script to fill a table based on a selection using ajax & DB.

The problem I'm having is with the column reorder (drag column manually) and TH.

So let say I select a value, the table get filled, then I change column order 2 to 3 it is ok the TH is moving with the data.
If I make another selection (on change function) then the TH will move to another column the data will be at the correct (column) position and so on (so the TH is not following the data and not at the correct column position).

This problem drive me crazy, any clue how to fix this ?

$('#search_list_state_id').on('change', function() {
    var table32 = $('#cities-list').DataTable();
    table32.clear().draw();
    table32.destroy();
                                
    var state_id = $('#search_list_state_id').val();    
    if(state_id){                               
        $('#cities-list').find('tbody').empty();    

            $.post( "ASEngine/ASAjax.php",
                { state_id : state_id, action : "stateIdChange"  },
                    function(allCityList) {                     
                        var resultCityList=JSON.parse(allCityList);                                                 
                            $.each(resultCityList, function (i, resultCityList) {
                                
                                var td = $('<td>');
                                    
                                    if (resultCityList.list_city_active == "Y") {
                                        td.html("<span class='badge bg-green'>YES</span>");
                                            } else if  (resultCityList.list_city_active == "N") {
                                                td.html("<span class='badge bg-red'>NO</span>")
                                                } else {
                                                    $('<td>').html(resultCityList.list_city_active);
                                                } 
                                                
                                                var $tr = $('<tr>').append( 
                                                    $('<td>').text(resultCityList.list_state_name),
                                                    $('<td>').text(resultCityList.list_state_code),
                                                    $('<td>').text(resultCityList.list_city_name),
                                                                    
                                                    td,
                                                                    
                                                    $('<td>').html('<button></button>')
                                                                  
                                                ).appendTo('#cities-list tbody'); 
                                                                  
                                                                 
                            });
                                
                                    
                            $('#cities-list').DataTable({
                                    "pageLength": 10,                   
                                    "stateSave": true,
                                    "stateDuration": 0, 
                                    "colReorder": true,
                                    "colReorder": {
                                        fixedColumnsRight: 1,
                                    },
                                    "responsive": true,
                                    "autoWidth": false,
                                    "lengthMenu": [ 5, 10, 15, 20, 25, 50, 75, 100 ]
                                            
                            });
                    });
                                                
                }else{
                        ('#cities-list').find('tbody').empty(); 

                    
                }
            }); 
This discussion has been closed.