Develop Reference

How to hide the entries in datatable?

Trying to stop display of certain params into datatable.
Already used Info: false. However still the datatable shows Showing 0 to 0 of 0 entries.
Here is the JavaScript code:
$(document).ready(function() {
$('#cli').addClass('hide');
$('.users8').addClass('activetab');
var oTable = $("#bugtable").dataTable({
"bLengthChange": false,
"Info" : false,
"paging":false,
"aoColumnDefs": [{
"bSortable": false,
"aTargets": [-1]
}],
"autoWidth": false,
"columns": [{
"width": "10%"
}, {
"width": "10%"
}, {
"width": "10%"
}, {
"width": "10%"
}, {
"width": "10%"
}, {
"width": "10%"
}]
});
$('#addfor').keyup(function() {
oTable.search($(this).val()).draw();
});
});

Set the property sEmptyTable in oLanguage when setting your table to an empty string:
var oTable= $('#bugtable').dataTable({
"oLanguage": {
"sEmptyTable": ""
}
// Other table setup options
}

How to get checked row ids in jQuery DataTables

In the below code I have a jQuery DataTable and I want to get selected row ids and store it into array. But I get only one row id SchoolID but I want to get SchoolID, ClassID and SectionID for checked checkbox.
var val[]; //global
"aoColumns": [
{
"mDataProp": "SchoolID",
"bSearchable": false,
"bSortable": false,
"sWidth": "10%",
"mRender": function(data, type, full) {
val = '<input type="checkbox" id="chkSchoolID" onclick="CheckRow(' + full.SchoolID + ')"></button>';
return val;
}
},
{
"mDataProp": "SchoolID",
"sWidth": "25%"
}, {
"mDataProp": "ClassID",
"sWidth": "25%"
}, {
"mDataProp": "SectionID",
"sWidth": "25%"
},
],
function CheckRow() {
alert(val);
}

Datatables: disable column resizing after filtering

I am using datatables and I populate the table with data using javascript. It works fine but I would like to prevent datables from resizing the table's column width after filtering. I have tried several solutions found on the web but it does not seem to solve the issue.
My HTML is:
<table class="table table-striped table-bordered table-hover" id="id-table" width="100%"></table>
I instantiate the table like:
var table = $('#id-table').DataTable(
{
paging: false,
ordering: false,
info: false,
"bAutoWidth": false, // Disable the auto width calculation : false,
columns: columns,
data : assignments,
sScrollX: "100%",
// aoColumns : aoColumns
// aoColumns : [
// { "sWidth": "150px" },
// { "sWidth": "150px" },
// { "sWidth": "150px" },
// { "sWidth": "150px" },
// { "sWidth": "150px" },
// { "sWidth": "150px" },
// { "sWidth": "150px" },
// { "sWidth": "150px" },
// { "sWidth": "150px" },
// { "sWidth": "150px" },
// { "sWidth": "150px" },
// { "sWidth": "150px" }
// ]
// aoColumns: aoColumns
// columnDefs : cdefs
}
);
where data is an array with the data and columns is an array of objects such as:
bSearchable false
sTitle "Column Title"
sWidth "100px"
title "Column Title"
mRender function(data, type, full, meta)
render function(data, type, full, meta)
I have tried setting the width in both "columns" directly and using the "aoColumns" options (commented out in the code above). In both cases, columns widths still get resized after filtering. Any idea on how I can disable this auto-resizing?

In your html table tag set style table-layout to 'fixed' and pass bAutoWidth = false to datatable function

I had this problem with the current version of DataTables (v1.10.16) and it was because I set autoWidth to false without understanding what it does.
In the default configuration (CSS table-layout: auto + DataTables' autoWidth: true) the columns are appropriately sized based on the data and do not jump when filtering.

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');
}
}
});

Multiple Fixed Headers in Datatables

recently my boss asked me to implement the fixed header plug-in for datatables plug-in in salesforce.
The way my code is designed is that every time search button is clicked i have a callback function to the db as well as an oncomplete function re-initializing the data tables.
Looking at the sample code for fixed headers i put the call to the function new FixedHeader(oTable); inside the initialization block. Instead of getting re-initialized every time, the header is getting created again and again. So with each call i have a new floating header plus the old one in some misplaced corner as well, how do i change this?
function Kudos()
{
oTable = $('.datatable').dataTable({
"iDisplayLength": 100,
"sDom": '<C><"H"T><"clear"><"H">t<"F"ip>',
"bRetrieve": true,
"aoColumnDefs": [ {
"aTargets": [3,4,5,6,7,8,9,10],
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
if ( sData < "0" ) {
$(nTd).css('color', 'red')
$(nTd).css('font-weight', 'bold')
}
}
} ],
"oTableTools":
{
"sSwfPath": "{!$Resource.SWF_File}",
"aButtons": [
{
"sExtends": "csv",
"sFileName": "PortFolio.csv",
"sButtonText":"Export"
}, "print" ]
},
"oColVis":
{
"activate": "mouseover"
},
"bAutoWidth": false,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaSorting": [[ 2, "asc" ]] ,
"bLengthChange": false,
"bFilter": true,
"aoColumns": [
{ "sWidth": "6%" },
{"sWidth": "6%"},
{"sWidth": "6%"},
{ "sWidth": "6%" },
{"sWidth": "6%"},
{"sWidth": "6%"},
{ "sWidth": "6%" },
{"sWidth": "6%"},
{"sWidth": "6%"},
{ "sWidth": "6%" },
{"sWidth": "6%"},
{"sWidth": "6%"},
{ "sWidth": "6%" },
{"sWidth": "6%"},
{"sWidth": "6%"}
]
});
new FixedHeader( oTable );
}

k, it seems this in a known bug. the unavailability of something like a destroy function for fixed headers is looking to be included in the next release of FixedHeader plug-in for datatables. basically there is no fix atm
As i am working on Salesforce, it is very easy to re-render parts of the VF page, without reloading the entire page, so i ended up rebuilding the DataTable upon each render. That fixed the issue.