Why column headers are not showing.When I perfrom column hide and show.

Omniwyse

I just perform column hide and show.
And moved to another tab and come back to same tab.
Its giving error like this.Please help me out.

allan

Can you link to a page showing the error please? I'll need to be able to debug it to know where it is coming from and fix it.

Allan

Omniwyse

I can't link the page.This is my code can you pls check it.

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);
                }
            }
//            success: function (json) {
//                callback(json);
//            },
//          error : function(){
//              //  table.state.clear();
//               //window.location.reload();
//          }
        } );
    },
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");
//  zonesTable.state.clear();
//    zonesTable.destroy();
//  displaySelectedType("Zones");
//  $('#zonesBtn').addClass("active");
//  zonesTable.stateRestore.state().load();
//  table.stateRestore.state();
//        e.preventDefault();
//table.ajax.reload(null, false);
//      table.fnDraw();
//zonesTable.state.clear();
//window.location.reload();
    } );
}

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

I can't link the page.This is my code can you pls check it.

There is nothing obvious in the code. Please build a test case showing the issue so we. can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

I just perform column hide and show.

Is this code in your code snippet above? If it is please point it out.

And moved to another tab and come back to same tab.

How are you doing this?

A test case showing how you are hiding and showing the columns and moving around the tabs will be very useful to help you debug.

Kevin

Omniwyse

I am using {extend:'colvis',text: 'Show/Hide Column',activate: 'mouseover'}
for column hide and show.

And moving around the tabs means in a single page I have 3 different tables in 3 tabs and I have added the image how its looks like.

kthorngren

Its very difficult to troubleshoot screenshots and code snippets. Please build a test case showing your tabs with tables that have fake data. Start with this:
http://live.datatables.net/

Add your JS and CSS libries to the HTML tab along with your tabs, etc. Update the Javascript tab with your relevant Dataables and other JS code.

Is this the same issue as you other thread?

Kevin

Omniwyse

Yes its a same issue.

I will try to add the test cases.