Develop Reference

DataTable is not a function referenced files are loaded properly

I am using jquery datatables in a mvc. i have loaded the script files properly but still datables is not working.
Code in _layout.cshtml:
<!--Data table jquery-->
<script src="~/Content/jquery-2.2.3.js"></script>
<script src="~/Content/datatables/jquery.dataTables.js"></script>
and code in index.cshtml for datatable:
$(document).ready(function () {
//jQuery DataTables initialization
var table = $('#MyTable').DataTable({
"processing": true, // for show processing bar
"serverSide": true, // for process on server side
"orderMulti": false, // for disable multi column order
"dom": '<"top"ip>rt<"bottom"lp><"clear">', // for hide default global search box // little confusion? don't worry I explained in the tutorial website
"ajax": {
"url": "/Product/LoadData",
"type": "POST",
"datatype": "json"
},
"aoColumns": [
{ "mData": "ProductID", "name": "ProductID", "visible": false, "autoWidth": true },
{ "mData": "ProductName", "name": "ProductName", "visible": false, "autoWidth": true },
{ "mData": "Qty", "name": "Qty", "autoWidth": true },
{ "mData": "UnitPrice", "name": "UnitPrice", "visible": true, "autoWidth": true },
{ "mData": "CatagoryID", "name": "CatagoryID", "autoWidth": false },
{ "mData": "catagoryname", "name": "catagoryname", "visible": true, "autoWidth": true }
]
});//End DataTable
});
When i run it gives following error:
Uncaught TypeError: $(...).DataTable is not a function
(anonymous function)# Product:91
fire # jquery-2.2.3.js:3187
fireWith # jquery-2.2.3.js:3317
ready # jquery-2.2.3.js:3536
completed # jquery-2.2.3.js:3552

you have your datatable.js in your _layout , you could be creating a conflict , set your datatable.js benchmark index at the end along with your declaration of datatable for all the DOM is preloaded when running the $().datatable

No matching records found in DataTable

I am using DataTable for retrieving the data from server side. Here. NO information on DataTable. It shows No matching records found error.
Here, oLanguage.sEmptyTable is not working and oLanguage.sZeroRecords is working refer http://datatables.net/ref#sZeroRecords
var DataTableApp = $('#DataTableApp').dataTable({
"sAjaxSource": "php/getAppDetails.php",
"bRetrieve":true,
"bDestroy":true,
"bServerSide": true,
//"bProcessing": true,
"sAjaxDataProp": "aaData",
//"bDeferRender": true,
"sServerMethod": "POST",
"iTotalDisplayRecords":1,
"iTotalRecords":1,
"oLanguage": {
"sZeroRecords": "No records to displays"
},
"fnServerParams": function ( aoData ) {
var imei_app = document.getElementById('imei').value;
console.log(imei_app);
aoData.push({"name":"imei","value":imei_app});
},
//aoColumns
"aoColumns": [{
"mData": "appName"
}, {
"mData": "appId"
}, {
"mData": "versionInstalled"
}, {
"mData": "appSize"
}, {
"mData":"dataSize"
},{
"mData": "appType"
},{
"mData":"installedLocation"
},{
"mData": "installedTime"
}]
});

oLanguage.sEmptyTable and oLanguage.sZeroRecords (or in the latest format language.emptyTable and language.zeroRecords) have different purposes.
language.emptyTable Displays when the table contains no rows at all.
language.zeroRecords Displays when, after applying filters, there are now no records to display.
It sounds like your table had rows before filters were applied.

You need to add .dataTables_empty CSS class with display: none attribute to your global style sheet (i.e. src/styles.css).
Note: in the angular, global style sheet is located at SCSS folder (i.e. scss/_custom.scss).
.dataTables_empty {
display: none;
}
https://l-lin.github.io/angular-datatables/#/basic/server-side-angular-way

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

Uncaught TypeError: Object [object Object] has no method 'fnFilterClear'

I am getting this error in the console :
"Uncaught TypeError: Object [object Object] has no method 'fnFilterClear'"
My code :
$(document).ready(function () {
var selectedColumn = $('#columnlist').find(":selected").text();
$('#csearchtext').bind("change paste keyup", function () {
var input = $('#csearchtext').val();
var dropdownindex = $("select[name='columnlist'] option:selected").index();
console.log(dropdownindex);
$('#table_id').dataTable().fnFilter(input, dropdownindex + 1, false, true, true, false);
});
$('#columnlist').on('change', function () {
$('#table_id').dataTable().fnFilterClear();
});
$('#dblist').on('change', function () {
var selected = $('#dblist').find(":selected").text();
tablefill(selected);
});
$('#search').click(function () {
var selected = $('#dblist').find(":selected").text();
tablefill(selected);
});
function tablefill(selected) {
$('.advsearchbar').show();
$('#stable').show();
$('#table_id').dataTable({
"sAjaxSource": '/php/connect/searchtablequery.php',
"bProcessing": true,
"sScrollY": "500px",
"bDeferRender": true,
"bDestroy": true,
"sAjaxDataProp": "",
"fnServerParams": function (aoData) {
aoData.push({ "name": "db", "value": selected });
},
"aoColumns": [
{ "mData": "calldate" },
{ "mData": "recordingfile" },
{ "mData": "uniqueid" },
{ "mData": "src" },
{ "mData": "did" },
{ "mData": "lastapp" },
{ "mData": "dst" },
{ "mData": "disposition" },
{ "mData": "duration" },
{ "mData": "userfield" },
{ "mData": "accountcode"}],
"iDisplayLength": 20,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": '<"H"Tfr>t<"F"ip>',
"oTableTools": {
"sSwfPath": "/DataTables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",
"aButtons": [
"copy", "csv", "xls", "pdf",
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": ["csv", "xls", "pdf"]
}]
}
});
}
});
The javascript is firing just fine but the one spot that triggers the fnfilterclear has that error prompted.

Look at http://datatables.net/plug-ins/api#how_to How to use Datatable Plug-in API. You have to include the function listed on that page to use the function.
To make use of one of the plug-in API functions below, you simply need to include it in the Javascript available for your page, after you load the DataTables library, but before you initialise the DataTable. After that, you will be able to initialise the table, and call the function on the resulting object.

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.