Qaiser iqbal Qaiser iqbal - 2 years ago 173
jQuery Question

DataTable (jQuery plugin) not showing last column

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.
enter image description here

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

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 Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download