DataTable (jQuery plugin) not showing last column

Question

i am working on datatable, my datatable did't showing last column in table . Example if i have 30 columns then datatable not showing 30th column. It only shows 29th column, although i received full data through ajax response.

Above image shows only 3 columns. but we have 4 columns.see this image below...

See below all code...

   var table  =  $('#csv_as_dataTable').DataTable({
    "colReorder": {
        fixedColumnsLeft: 1,
        fixedColumnsRight: 1,
      },
    "pagingType": "full_numbers",
     "scrollX": false,
     "colReorder": true,
     "iDisplayLength": 100,
     "aLengthMenu": [[100, 200, 500, 1000], [100, 200, 500, 1000]],
     "initComplete": function(settings, json) {
        $('#csv_as_dataTable').wrap("<div id='db_scroll'></div>");


        },
      //"responsive": true,
      "bProcessing": true,
      "oLanguage": {
        "sProcessing": "<div class='datatableNewProcessor'>Processing..</div>"
      },
      "aaSorting": [],
      "columns": JSON.parse(headersData),
      "bFilter": false,
      "bServerSide": true,
      "columnDefs": [{
        "targets": -1,
        "visible": false,
      }],
     "sAjaxSource": "/es_scripts/data_table_server.php",
     "fnServerData": function (sSource, aoData, fnCallback) {
      aoData.push({"name": "indexName", "value": indexName});
      aoData.push({"name": "indexType", "value": indexType});
      //getting the values form fields 
      var filersCount = $('input[name="filter_count"]').val();
        var filterJson = "";
        for (i = 1; i <= filersCount; i++) {
          if ($('#filter' + i).length == 0) {
            continue;
          }
          if ($('#fil_val' + i).val() == "") {
            continue;
          }
          var colname = $('#cols_list' + i).val();

          var operator = $('#op_list' + i).val();
          var required_val = $('#fil_val' + i).val();
          if (colname == '' || operator == '') {
            alert('Column name & operators are required to apply filter');
            return false;
          }
          filterJson += '{"colname":"' + colname.split(' ').join('_') + '", "operator":"' + operator + '", "required_val":"' + required_val + '"},';
        }
        filterJson = filterJson.replace(/,\s*$/, "");
        filterJson = "[" + filterJson + "]";
        aoData.push({"name": "filterJson", "value": filterJson});
        console.log("************filterjson**************");
        console.log(filterJson);
        console.log("***************************");

      //@ajax call to server
        $.ajax({
          "dataType": 'json',
          "type": "GET",
          "url": sSource,
          "data": aoData,
          "success": function (json) {
            //var json = '{"iDisplaying": 3,"iTotalDisplayRecords": 3,"iTotalRecords": 3,"aaData": [["Nixon","Architect","5421"],["Nixon1","Architect1","54211"],["Nixon2","Architect","5421"]]}';
            console.log("&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&");
            //console.log(JSON.parse(json));
            console.log(json);
            console.log("&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&");
            //fnCallback(JSON.parse(json));
            fnCallback(json);
          },
          "timeout": 30000,   // Optional if you want to handle timeouts (which you should)
          //"error": handleAjaxError // this sets up jQuery to give me errors.
        });

  /////////////////////////////////////////////////////////////////////////////////////
  ////////////////////////////////////////////////////////////////////////////////////
 },

});

Answer 1

Try this once <th class="all">...</th> add to all <th> tag

Answer 2

I believe your problem is in this place, you are hiding the last column.

"columnDefs": [{
        "targets": -1,
        "visible": false,
      }],

As the doc says:

For example targets: [ -1, -2 ] would target the last and second last columns in the table.

Complete reference https://datatables.net/reference/option/columnDefs