Develop Reference

How to show just the N first number of rows on DataTables? How to download all data after this?

I am trying to show only the first N rows of data on DataTables, but can't find a way.
Additionally, when I click the Copy or Excel buttons I want to download all the data, and not just the rows who are being show.
In my last try, I used paging and pageLength without success. Below is the code. My data is on tbldata:
var dtable = $("#dvTableAC").DataTable({
data: tbldata,
columns: [
{ title: "A" },
{ title: "B" },
{ title: "C" },
{ title: "D" }
],
"paging": false,
"pageLength": 50,
dom: 'Blfrtip',
buttons: [
'excel', 'copy'
]
});

Please not that you need an extra plugin to be able to use the buttons (excel, copy).
https://datatables.net/extensions/buttons/built-in
var dtable = $("#dvTableAC").DataTable({
data: tbldata,
columns: [
{ title: "A" },
{ title: "B" },
{ title: "C" },
{ title: "D" }
],
"paging": true,
"pageLenght":10,
dom: 'Blfrtip',
buttons: [
'excel', 'copy'
]
});
Datatables will show all the data you send to it, if you set paging to false, then pageLenght is not used. If you want to limit the total records that datatables show, you must send just those records to it. You can restrict the number on the mysql query using limit 10. But I don't know any method of not having pagination and show only a x amount of rows from the total.

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

DataTables stuck on "Processing" when sorting

Below is the document ready function
$('#example').dataTable({
"bProcessing": true,
"bServerSide": true,
"aaSorting": [[2, "asc"]],
"sAjaxSource": "/userControl/GetUser.php",
"aoColumnDefs": [{
"aTargets": [0],
"mData": "download_link",
"mRender": function (data, type, full) {
return 'Detail<br/>Delete';
}
}],
"aoColumns": [
{ "mData": null },
{ "mData": "LoginId" },
{ "mData": "FirstName" },
{ "mData": "LastName" }
]
});
var oTable = $('#example').dataTable();
oTable.fnSort([1, 'asc']);
With the above code, the datatable was stuck on "Processing..." like the below screen shows, but if I remove the sorting, the data was shown correctly, but whenever the user request a column to be sort, the result was still the same, is there anything that I did wrong?

I removed "bServerSide": true, and the DataTables can sort and filter properly now

Your server-side implementation has to handle sorting via the iSortCol parameters, using fnSort is for client-side implementations and will not work for server-side
As #mainguy said in his comment, removing bServerSide will disable pagination and more than likely search
Look at the examples for asp.net on the site, as thats the lang you tagged, if you need more assistance, update your question with the asp.net source code

Please see if your server response has the same counter value for draw or sEcho property as sent by the client.
Example, request may contain draw: 11 or sEcho: 11 parameters, then, the server response must contain draw: "11" or sEcho: "11".

Data Tables - Scroller Missing Column Headers on Refresh

I'm using the new Data Tables extra plugin - Scroller.
However, I am having trouble when refreshing the existing Data Table Grid with a new data source array from an ajax request. (Code below).
The first time I run this exact code on the page, it works properly. However, whenever I call this code snippet again given a different source, the data table is re-rendered but is missing all column headers. Does anyone know why the Columns are disappearing every subsequent time after the first?
oTable = $('#example').dataTable({
"aoColumns": [
{ "sTitle": "ID" },
{ "sTitle": "Test" },
{ "sTitle": "Type" },
{ "sTitle": "Date" },
{ "sTitle": "Revision" }
],
"aaData": source,
"bDestroy":true,
"sScrollY": "380px",
"sDom": 'frtiS',
"bDeferRender": true,
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$(nRow).attr('id', "row-" + aData[0]);
return nRow;
}
});

I have also had the same problem and here is the answer from Allan and it worked perfectly in my case.
http://www.datatables.net/forums/discussion/14278/scroller-plugin-misplaces-datatables-column-header#Item_1

jquery datatables: adding extra column

Scenario
I am using datatables (#version 1.9.4) for the first time to display data to the user.
I succeed in retrieving the data via ajax and in binding them to the datatable.
Now I want to add extra columns to let the user process the records. For semplicity sake, the aim is to add a button with an onclick handler that retrieve the data of the 'clicked' record.
In my plan I would bind the json item corresponding to the 'clicked' record to the onclick handler.
Till now, if I add an additional TH for the action column to the DOM, an error occurs from datatables code:
Requested unknown parameter '5' from data source for row 0
Question
How to set custom columns? How to fill their content with HTML?
Here is my actual config.
HTML
<table id="tableCities">
<thead>
<tr>
<th>country</th>
<th>zip</th>
<th>city</th>
<th>district code</th>
<th>district description</th>
<th>actions</th>
</tr>
</thead>
<tbody></tbody>
</table>
Javascript
$('#tableCities').dataTable({
"bPaginate": true,
"bLengthChange": false,
"bFilter": true,
"bSort": true,
"bInfo": false,
"bAutoWidth": true
, "bJQueryUI": true
, "bProcessing": true
, "bServerSide": true
, "sAjaxSource": "../biz/GetCitiesByZip.asp?t=" + t
});
Sample Json result
{
"aaData":
[
[
"IT",
"10030",
"VILLAREGGIA",
"TO",
"Torino"
],
[
"IT",
"10030",
"VISCHE",
"TO",
"Torino"
]
],
"iTotalRecords": 2,
"iTotalDisplayRecords": 2,
"iDisplayStart": 0,
"iDisplayLength": 2
}
Edit
Daniel is right. The solution is to set up the custom column in the aoColumnDefs, specifying the mData and the mRender properties. In particular mRender lets to define custom html and javascript.
/* inside datatable initialization */
, "aoColumnDefs": [
{
"aTargets": [5],
"mData": null,
"mRender": function (data, type, full) {
return 'Process';
}
}
]

You can define your columns in a different way
like this
"aoColumns": [
null,
null,
null,
null,
null,
{ "mData": null }
]
or this
"aoColumnDefs":[
{
"aTargets":[5],
"mData": null
}
]
Here some docs Columns
Take a look at this DataTables AJAX source example - null data source for a column
Note that prior to DataTables 1.9.2 mData was called mDataProp. The name change reflects the flexibility of this property and is consistent with the naming of mRender. If 'mDataProp' is given, then it will still be used by DataTables, as it automatically maps the old name to the new if required.
Another solution/workaround could be adding that '5' parameter...
For example adding extra "" to each row
like this:
[
"IT",
"10030",
"VILLAREGGIA",
"TO",
"Torino",
""
],
[
"IT",
"10030",
"VISCHE",
"TO",
"Torino",
""
]

Just in case anyone using a newer version of DataTables (1.10+) is looking for an answer to this question, I followed the directions on this page:
https://datatables.net/examples/ajax/null_data_source.html

Posting this answer here, just to show that where the aoColumnDefs needs to be defined. I got help from this question it self, but I struggled for a while for where to put the aoColumnDefs. Further more also added the functionality for onclick event.
$(document).ready(function() {
var table = $('#userTable').DataTable( {
"sAjaxSource": "/MyApp/proctoring/user/getAll",
"sAjaxDataProp": "users",
"columns": [
{ "data": "username" },
{ "data": "name" },
{ "data": "surname" },
{ "data": "status" },
{ "data": "emailAddress" },
{ "data" : "userId" }
],
"aoColumnDefs": [
{
"aTargets": [5],
"mData": "userId",
"mRender": function (data, type, full) {
return '<button href="#"' + 'id="'+ data + '">Edit</button>';
}
}
]
} );
$('#userTable tbody').on( 'click', 'button', function () {
var data = table.row( $(this).parents('tr') ).data();
console.log(data);
$('#userEditModal').modal('show');
});
} );