I am using datatable as in 3 tabs as a 3 tables.When moving around tabs columns headers chage random

Omniwyse

In a single page I have 3 tabs with 3 tables.
I have perform the column reorder and column hide and show around the 3 tabs of tables.
When I click on any of the tabs, then only column header are places changes but data is correct.
Why is that happens.

Example :

Again column headers names changes when I go to holiday tab and come back to zones tab.

allan

You are using ColReorder? If so, does this happen if you disable that option?

I think I'd need to see a test case showing the issue to be able to help here.

Allan

Omniwyse

This is my code.

editor = new $.fn.dataTable.Editor( {
ajax: {
url: extract_url('/rest/updateType'),
data: function ( d ) {
d._csrf = CSRF_TOKEN,
d.typeName = 'Zones',
key = Object.keys(d.data)[0];
d.zoneId = d.data[key].zoneId,
d.name = d.data[key].name ,
d.description = d.data[key].description,
d.status = d.data[key].status
},
success: function (response) {
if (response.status === 'success') {
hideErrorMessages();
if(response.value != null && response.value.action === 'create'){
newRecordCreated = true;
}

                crudOperationPerformed = true;
                displaySelectedType(response.value.prerequisiteType);
         }else if (response.status === 'error') {
                hideErrorMessages();
                $('#zonesDuplicationErrors').html(
                '<div class="alert alert-warning"><button type="button" class="close" data-dismiss="alert">&times;</button><ul></ul></div>');
                for (var e in response.value) {
                  $('#zonesDuplicationErrors ul').append('<li>'+ response.value[e] +'</li>');
                }
                  $("#zonesDuplicationErrors").show();

}
},
},
table: "#zones-search-results",
idSrc: 'zoneId',
dataType: 'json',
fields: [ {
label: "ID :",
name: "zoneId",
type:"hidden",
data :"zoneId"

        }, {
            label: "Name :",
            name: "name",
            data :"name",
        }, {
            label: "Description :",
            name: "description",
            data :"description"
        },
        {
            label: "Status :",
            name: "status",
            data : status,
            type: "select",
        }
    ]
} );


editor.on( 'preSubmit', function ( e, o, action ) {
    if ( action !== 'remove' ) {
        var zoneName = this.field( 'name' );

        if ( ! zoneName.isMultiValue() ) {
            if ( ! zoneName.val() ) {
                zoneName.error( 'Zone name must be given' );
            }

            if ( zoneName.val().length >= 50 ) {
                zoneName.error( 'The zone name length must be less that 50 characters' );
            }
        }

        if ( this.inError() ) {
            return false;
        }
    }
} );

editor.dependent( 'status', function (val, data, callback) {
var test = new Array();
for(var a=0;a < statusList.length;a++){
obj= { "label" : statusList[a], "value" : statusList[a]};
test.push(obj);
}
editor.field('status').update(test);
callback(test);
});
$('#loading').hide();
$('.customersTitle').show();
var search= $('#zoneSearch').val();
var status= $('#zonesStatus-filter').val();
var loggedInUser= $('#loggedInUser').val();
var zonesTable = $('#zones-search-results').DataTable( {
dom: 'lBfrtip',
stateSave: true,
initComplete: function() {
this.api().columns.adjust();
},
"stateSaveCallback": function (settings, data) {

        for (const column in data.columns) { 
             delete data.columns[column].search;
        }

var tableListJSON = {};
var tableListJSON = JSON.stringify(data);

delete data.time;
var tableListWithoutTimeJSON = JSON.stringify(data);

if(zonesJSON != tableListWithoutTimeJSON){
zonesJSON = tableListWithoutTimeJSON;
$.ajax( {
"url": extract_url('/rest/state_save'),
data: {

        tableList : tableListJSON,
        tableName : 'ZonesTable',
        loggedInUser : loggedInUser,
            "_csrf": CSRF_TOKEN
        },
  "dataType": "json",
  "type": "POST",
  "success": function () {}
} );

}
},
stateLoadCallback: function (settings,callback) {
$.ajax( {
async: false,
url: extract_url('/rest/load_state'),
data: {
loggedInUser : loggedInUser,
tableName : 'ZonesTable',
},
dataType: 'json',
success: function (json) {
if(json.status === 'success'){
callback(JSON.parse(json.value));
}else{
callback(json);
}
}
} );
},
stateSaveParams: function (settings, data) {
delete data.search;
},
stateDuration:-1,
"responsive": true,
"colReorder": true,
select: true,
"buttons": [
{
extend: 'collection',
text: 'Export',
buttons: [
{
extend: 'csvHtml5', text: 'Export To CSV', filename:'Customer CSV Data',action: newexportaction,
exportOptions: {
columns: ':visible'
}
},{
extend: 'pdfHtml5', text: 'Export To PDF', filename:'Customer PDF Data',action: newexportaction,
exportOptions: {
columns: ':visible'
}
}
],
},
{ extend: 'create', editor: editor },
{ extend: 'edit', editor: editor },
{ extend: 'remove', editor: editor },
{extend:'colvis',text: 'Show/Hide Column',activate: 'mouseover'}
],

    "processing": true,
    "serverSide": true,
    "searching": false,
    "length": 10,
    "ajax": {
"url": extract_url('/rest/zones'),
data: function ( d ) {
    var sortingColumn=d.order[0].column;
    var newRecord = '';
    if(crudOperationPerformed == true){
        sortingColumn = '';
    }
    if(newRecordCreated == true){
        newRecord = 'create';
    }
    var sortingOrder=d.order[0].dir;
    d.status=status,
    d.search=search,
    d.newRecord = newRecord,
    d.orderColumn=sortingColumn,
    d.order=sortingOrder;
    delete d.columns;
    crudOperationPerformed = false;
    newRecordCreated = false;
}

},
columns: [
{data: "zoneId",
},
{data: "name",
},
{data: "description",
},
{data: "status",
},

],
columnDefs: [{
orderable: false,
targets: [0,1,2,3]

}]

} );
$('#zones-search-results tbody').on('click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
} else {
zonesTable.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
});
$('#resetZonePreference').click( function (e) {
e.preventDefault();
zonesTable.state.clear();
zonesTable.destroy();
displaySelectedType("Zones");
$('#zonesBtn').addClass("active");
} );
}

kthorngren

You didn't answer Allan's question:

You are using ColReorder? If so, does this happen if you disable that option?

Please provide a test case showing the issues so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Omniwyse

Yes I am using ColReorder . I have disabled the ColReorder and still seeing this issue.
After disabled I just perform column hide and show.
Again its giving same problem.

I can't provide the test case.

kthorngren

This is the same issue as this thread. Discussion is continued in the thread.

Kevin