Develop Reference

Hide columns not working properly with server side processing in jquery datatables

I am using jquery datatables(1.10.9) with server side processing.
tab = $('#'+div).dataTable( {
"sDom": 'T<"clear">frltip',
"aaSorting": [],
"bAutoWidth" : false,
"sPaginationType": "full_numbers",
"sScrollY": "550px",
"sScrollX": "100%",
"bFilter": true,
"aoColumnDefs": [{ "bSearchable": false, "aTargets": [ 2 ] },{ "bSortable": false, "bSearchable": false, "aTargets": [ 12 ] },{ "bSortable": false, "bSearchable": false, "aTargets": [ 13 ] }],
"oTableTools": {},
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": 'data/getdata',
"fnServerParams": function ( aoData ) {
},
"fnRowCallback": function( nRow, aData, iDisplayIndex ){
// Processing data like:
// $('td:eq(2)', nRow ).html( 'Test' );
}
});
// Hiding 5th column
tab.fnSetColumnVis( 5, false); //Does not work.Removes the column header but not the row data.
How do I get hide column to work properly with server side processing in jquery datatables?

I got this to work as follows:
fnDrawCallback: function() {
$('td:nth-child(3),th:nth-child(3)').hide();
}]
tab.fnSetColumnVis( 3, false) will not work because it re-fetches the data.Hence, had to do it using simple old jquery.

fnSetColumnVis() function has 3rd property (true or false) that not rebind the data. so try with fnSetColumnVis(3,false,flase) may be it can help.

You do it when you set up the datatable, using "ColumnDefs" thusly, where targets is the number of the column you want to hide:
tab = $('#'+div).dataTable( {
"columnDefs": [{ targets: 5, visible: false }],
"sDom": 'T<"clear">frltip',
"aaSorting": [],
"bAutoWidth" : false,
...
If you have 2 hidden columns, it will look like this:
"columnDefs": [{ targets: 5, visible: false }, { targets: 6, visible: false }],
Note: column numbering starts at 0.

Datatable jump to page which contains tr with certain class

I am trying to use row().show() plugin to jump to page where is tr with class .scrollAndHightlight in my DataTable with id #reqToApp.
Here is my DT initialization with initComplete function:
var table = $('#reqToApp').DataTable({
responsive: true,
stateSave: true,
fixedHeader: true,
autoWidth: false,
select: true,
order: [[1, "desc"]],
"iDisplayLength": 15,
language: {
"url": "/js/Czech.json"
},
"aoColumns": [
{"bVisible": true, "bSortable": true, "bSearchable": true, "sType": "html"},
{"bVisible": true, "bSortable": true, "bSearchable": true, "sType": "string"},
{"bVisible": true, "bSortable": true, "bSearchable": true, "sType": "string"},
{"bVisible": true, "bSortable": true, "bSearchable": true, "sType": "string"},
{"bVisible": true, "bSortable": true, "bSearchable": true, "sType": "string"},
{"bVisible": true, "bSortable": true, "bSearchable": true, "sType": "string"},
{"bVisible": true, "bSortable": true, "bSearchable": true, "sType": "string"},
{"bVisible": true, "bSortable": false, "bSearchable": false, "sType": "html"}
],
"initComplete": function(settings, json){
var row = table.row($(".scrollAndHighlight")).node();
table.row(row).draw().show().draw(false);
}
});
But it does nothing, no errors in console.
What am I doing wrong?
JSFiddle: https://jsfiddle.net/ebRXw/2427/

You should not use $() jQuery method because it has access to elements that exists in DOM only. With jQuery DataTables pages other than current don't exist in DOM, therefore row on pages other than first couldn't be found.
You can supply CSS selector to row() method instead.
For example:
"initComplete": function(settings, json){
var api = new $.fn.dataTable.Api(settings);
var row = api.row(".scrollAndHighlight").node();
api.row(row).draw().show().draw(false);
}
See updated jsFiddle for code and demonstration.

jQuery dataTables ScrollBody's height is too short when has less data

My datatable is look like this when it has less data
In this image, the datatable has 2 rows and it's scrollbody's height is too short, so it cant show the 2nd record. How can I increase it ? Here is my code :
$('#tblResult').dataTable({
"sScrollX": "100%",
"sScrollY": "300px",
"scrollCollapse": true,
"sScrollXInner": "100%",
"sPaginationType": "full_numbers",
"bAutoWidth" : false,
"bScrollCollapse": true,
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "/COLLAT4/plugins/melanin-2.0.0/images/copy_cvs_xls.swf",
"aButtons": [ "xls"]
},
});

default sorting not working in jquery datatable on serverside processing?

Here is the js code that I use. I want to have column 2 sorted in descending order by default.
when I disable bserverside to be false, I get this working (but it does not show all the records when I click next page).
However, if I enable bserverside:true, I get the what I have shown below in the image. if I remove "aaSorting", but keep bserverside:true, it displays all records on pagination. but the records are not sorted and clicking the sort button on the column header does not sort. Moreover, sorting on other columns (which I have included in aocolumns) produce the same image. I cannot figure out what is going wrong. I spent entire weekend trying to figure this out. but have not made any progress yet
$(document).ready(function() {
var oTable = $('#search_table').dataTable( {
"sDom": 'T<"clear">lrtip',
"bProcessing": true,
//"bServerSide": true,
"sAjaxSource": "{% url 'search_list_json' %}",
"aaSorting": [ [2,"desc" ]],
"iDisplayLength":10,
"sPaginationType": "full_numbers",
"aoColumns": [
{ "sClass": "center", "sWidth": "15%","bSortable": false },
{ "sClass": "center", "sWidth": "5%","bSortable": true },
{ "sClass": "center", "sWidth": "5%","bSortable": true },
{ "sClass": "center", "sWidth": "5%" ,"bSortable": true },
{ "sClass": "center", "sWidth": "5%","bSortable": false}
]
} );
} );

Following code is working for me
$(document).ready(function() {
var dataTable = $('#employee_data').DataTable({
"processing": true,
"serverSide": true,
"aaSorting": [ [0,"desc" ]],
"ajax": {
url: "$urlOne",
type: "post",
error: function()
{
alert('error');
}
}
});

jQuery DataTable: Callback function(fnUpdate, fnCreatedCell, etc) doesn't work if mData is null

I create dataGrid using jQuery DataTable. However, I found problem to update cell when value of mData is null like code below:
var oTable = $("table#table_lookup").dataTable({
"bLengthChange": false,
"bFilter": false,
"sPaginationType": "full_numbers",
"aaData": data,
"aoColumnDefs": [{
"sTitle": "No.",
"mData": null,
"aTargets": [0],
"bSortable": false,
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).text((iRow + 1));
}],
"bAutoWidth": false,
"aaSorting": [[ 1, 'asc' ]]
});
Can anyone help me to solve this problem?

when mData is null, you need to specify sDefaultContent option which can be set a empty string "", like:
var oTable = $("table#table_lookup").dataTable({
"bLengthChange": false,
"bFilter": false,
"sPaginationType": "full_numbers",
"aaData": data,
"aoColumnDefs": [{
"sTitle": "No.",
"mData": null,
"sDefaultContent": "", //add this
"aTargets": [0],
"bSortable": false,
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).text((iRow + 1));
}],
"bAutoWidth": false,
"aaSorting": [[ 1, 'asc' ]]
});