Develop Reference

How to disable sorting on a column in a datatable

I'm trying to disable the sorting function on one of my columns.
I already have tried multiple things but these didn't work.
I tried adding this: data-sorter="false" to my <th> but it just ignored it.
I also have tried this but it also just ignored it:
“columnDefs”: [ {
“targets”: 2,
“orderable”: false
}]
When I tried these methods I did not get any errors.
I also found out using inspect element that my <th> automatically gets the class sorting added to it.
Here is my code:
My table:
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Vraag</th>
<th>Gepost op</th>
<th>Acties</th>// I want to disable sorting here
</tr>
</thead>
<tbody>
</tbody>
</table>
My js:
// Call the dataTables jQuery plugin
$(document).ready(function() {
$('#dataTable').DataTable({
"columnDefs": [ {
"targets": 2,
"orderable": false
} ]
});
});
Please help me I have been searching for an answer the last 3 days.

Did you try to set "bSort":false? For more details see THIS
Disable Sort from datatable
"bSort":false
To Disable sorting on particular column:
"bSortable": false
More specific:
$('#table').dataTable( {
"bSort":true,
aoColumnDefs: [
{ aTargets: [ '_all' ], bSortable: false },
{ aTargets: [ 0 ], bSortable: true },
{ aTargets: [ 1 ], bSortable: true }
]
}

Reload dataTable from variable

I searched all over web and I didn't find easy solution for this. I'm using jQuery DataTables with "static" data source (one var is filled with data using SignalR and then later, DataTable is built). Now, when change of this dataset comes, I want to update table using this data set. Ideally, that would be simple "refresh" which reloads data from specified source. Here is my HTML
<table class="table table-hover table-condensed table-responsive" id="tableAccounts">
<thead>
<tr>
<th data-localize="_A_C">_A_C</th>
<th data-localize="_Name">_Name</th>
<th data-localize="_Address">_Address</th>
<th data-localize="_City">_City</th>
<th data-localize="_Phone">_Phone</th>
</tr>
</thead>
<tbody></tbody>
And here is my javascript which initially loads data:
tAccounts = $('#tableAccounts').dataTable({
"data": AccountAll,
"bFilter": true,
"pageLength": 100,
"bSearchable": true,
"bInfo": false,
"columns": [
{ "data": "AccountCode" },
{ "data": "Name" },
{ "data": "Address" },
{ "data": "City" },
{ "data": "Phone" }
],
"columnDefs": [
{
"render": function (data, type, row) {
return ("0000" + data.toString(16)).slice(-4);
},
"targets": 0
},
{ "visible": true, "targets": [0] }
]
});
tl;dr;
How to refresh datatable when data source (AccountAll in this case) is changed without destroying whole table? Bonus point if selection and filter is preserved.
Change can be anything. New row added, row removed, cell value changed.

You can use combination of clear() and rows.add() API methods to clear existing data and add updated data.
In this case filtering and sorting would be preserved.
If you want to preserver the current page, call draw(false) instead of draw() but if you're adding new rows, there is little sense in preserving the current page
For example:
var data = [['old',2,3,4,5,6]];
var table = $('#example').DataTable({
'data': data
});
var dataNew = [['new',2,3,4,5,6]];
table.clear().rows.add(dataNew).draw();
See this example fro code and demonstration.

Jquery Datatables ajax call won't run

I have following dataTables jquery in my js file
$("#manage_chauffeurs").dataTable({
"processing": true,
"bServerSide": true,
"aaSorting": [],
"ajax":{
'type': 'POST',
'url': '/admin/reports/chauffeurs_data'
},
"responsive": true,
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 14 ] }
],
"columnDefs": [ { targets: '_all', visible: true } ],
"dom": '<"top"f>rt<"bottom"p><"clear">',
"aoColumns": [
{ "mDataProp": "name", "sDefaultContent": "", "sClass": "center_align"},
{ "mDataProp": "user_id", "sDefaultContent": "", "sClass": "center_align" }
]
});
Below is the html
<table class="display responsive no-wrap" id="manage_chauffeurs">
<thead>
<tr>
<th width="50%">User Name</th>
<th width="50%">User ID</th>
</tr>
</thead>
</table>
I have the resource '/admin/reports/chauffeurs_data' set at my server. However, I don't get an ajax call. No call at all.
Browser console gives the following error:
jquery.dataTables.js?body=1:4090 Uncaught TypeError: Cannot read property 'style' of undefined
Checked for above error, I have no mismatch of columns in my code.
What could be going wrong here?
Someone please help!

Unable to display data using jQuery datatables, AJAX and JSON

I'm having a problem displaying my data on my jQuery DataTable using AJAX. I'm using the library from datatables.net. I've tried packaging the JSON in many different formats and nothing is working. I've also messed around with the 'columns' section, interchanging 'title' and 'data.' I only have one event to display for now, but the bottom of the table shows something crazy like 4,000 entries. Here is my code:
<script src="//cdn.datatables.net/1.10.10/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#myTable').DataTable({
"processing": true,
"ajax": {
"url": "/api/EventsApi/GetAll",
"dataSrc": ""
},
columns: [
{ title: "Title" },
{ title: "Template" },
{ title: "Capacity" },
{ title: "Boarding Location" },
{ title: "Status" },
{ title: "Edit / Delete" }
//{ "data": "title" },
//{ "data": "eventTemplateID" },
//{ "data": "locomotive.capacity" },
//{ "data": "boardingLocationStart.city" },
//{ "data": "status" },
//{ "data": "status" }
]
});
});
<div class="title-content">#ViewBag.Title</div>
<div id="dataTable">
<table id="myTable" class="table table-hover" style="text-align: center;">
<tbody id="tBody">
<!-- Table body data goes here -->
</tbody>
</table>
</div>
Here is the JSON that's being returned from the AJAX call:
{"data":[{"tripEventID":1,"extraDetails":"this train has special details","eventName":"ZombieTrainEventName ","departureDate":"\/Date(1443715200000)\/","returnDate":"\/Date(1443718800000)\/","eventCapacityOveride":100,"eventTemplateID":3,"title":"The Zombie Train ","companyID":1,"description":"description of zombie train ride ","boardingClosed":30,"status":1,"boardingLocationStart":{"boardingLocationID":3,"companyID":1,"name":"Skunk Train Willits","streetAddress":"Willits somewhere","city":"Some city","state":"CA","zip":"95713","description":"Desc field1"},"boardingLocationStartTo":{"boardingLocationID":3,"companyID":1,"name":"Skunk Train Willits","streetAddress":"Willits somewhere","city":"Some city","state":"CA","zip":"95713","description":"Desc field1"},"boardingLocationReturnFrom":{"boardingLocationID":3,"companyID":1,"name":"Skunk Train Willits","streetAddress":"Willits somewhere","city":"Some city","state":"CA","zip":"95713","description":"Desc field1"},"boardingLocationReturnTo":{"boardingLocationID":3,"companyID":1,"name":"Skunk Train Willits","streetAddress":"Willits somewhere","city":"Some city","state":"CA","zip":"95713","description":"Desc field1"},"allowFlexableReturnDate":false,"product":[],"productBundle":[{"bundleID":10,"companyID":1,"displayName":" Pumkin Bundle copy Test","price":0.0100,"tax":0.0200,"productList":[]}],"locomotive":{"trainID":1,"companyID":1,"title":"Skunk_Steam ","type":1,"description":"Steam locomotive ","capacity":998,"status":0},"media":{"mediaID":1,"companyID":1,"hero":[],"gallery":[{"mediaDetailID":6,"formatTypeID":2,"fileName":"testimage6.txt","order":1,"path":null,"url":null},{"mediaDetailID":7,"formatTypeID":2,"fileName":"testimage6.txt","order":1,"path":"path6","url":"url6"},{"mediaDetailID":8,"formatTypeID":2,"fileName":"testimage7.txt","order":1,"path":"path7","url":"url7"}],"inside":[{"mediaDetailID":1,"formatTypeID":1,"fileName":"testimage.txt","order":1,"path":null,"url":null},{"mediaDetailID":2,"formatTypeID":1,"fileName":"testimage2.txt","order":1,"path":null,"url":null},{"mediaDetailID":3,"formatTypeID":1,"fileName":"testimage3.txt","order":1,"path":null,"url":null}]},"duration":15,"isExclusive":false,"timeAtDestination":45,"isOneWay":false}]}
Like I said, I've tried repackaging the JSON as nested objects and arrays with nothing working. Am I missing something obvious? Any help is appreciated, thank you!

You have to name the columns in your js like the json index keys like this:
$(document).ready(function() {
$('#myTable').DataTable( {
"ajax": "path/to/your/file.json",
"columns": [
{ "data": "title" },
{ "data": "eventTemplateID" },
{ "data": "eventCapacityOveride" },
{ "data": "boardingLocationStart.streetAddress" },
{ "data": "status" },
{ "data": null }
],
"columnDefs": [ {
"targets": -1,
"data": null,
"defaultContent": "<button>Click!</button>"
} ]
} );
} );
Note that you can define custom data in tables with the columnDefs option.
And than edit your HTML with something like this:
<table id="myTable" class="table table-hover" style="text-align: center;">
<thead>
<tr>
<th>Title</th>
<th>Template</th>
<th>Capacity</th>
<th>Boarding location</th>
<th>Status</th>
<th>Edit / Delete</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Title</th>
<th>Template</th>
<th>Capacity</th>
<th>Boarding location</th>
<th>Status</th>
<th>Edit / Delete</th>
</tr>
</tfoot>
</table>
Here you can find a working fiddle

DataTables Cannot read property 'length' of undefined

Below is the document ready function
Script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#example').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "GetUser.ashx",
"sServerMethod": "POST",
"sAjaxDataProp" : "",
"aoColumnDefs": [ {
"aTargets": [ 0 ],
"mData": "download_link",
"mRender": function ( data, type, full ) {
return 'Detail';
}
} ],
"aoColumns": [
{ "mData": "LoginId" },
{ "mData": "Name" },
{ "mData": "CreatedDate" }
]
});
Below is the respond from server (GetUser.ashx)
[
{
"UserId": "1",
"LoginId": "white.smith",
"Activated": "Y",
"Name": "Test Account",
"LastName": "Liu",
"Email": "white.smith#logical.com",
"CreatedDate": "1/21/2014 12:03:00 PM",
"EntityState": "2",
"EntityKey": "System.Data.EntityKey"
},
More Data...
]
Below is the html table where the data should be put
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th width="15%">User Detail</th>
<th width="15%">LoginID</th>
<th width="15%">Name</th>
<th width="15%">Created Date</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5" class="dataTables_empty">Loading data from server</td>
</tr>
</tbody>
<tfoot>
<tr>
<th width="15%">User Detail</th>
<th width="15%">LoginID</th>
<th width="15%">Name</th>
<th width="15%">Created Date</th>
</tr>
</tfoot>
</table>
Expected result:
But I came across a problem:
While the page is loading, there was an uncaught exception from the browser:
Cannot read property 'length' of undefined
When I further check, it came from line 2037 of jquery.dataTables.js
var aData = _fnGetObjectDataFn( oSettings.sAjaxDataProp )( json );
I checked that the json was valid, but the "aData" was null, why this happen?

Your "sAjaxDataProp" : "" is set to an empty string, which causes this error.
dataTables expects to have a string here to tell under which key your server returned data can be found.
This defaults to aaData, so your json should include this key amongst all others that might be returned or needed by pagination etc.
Normal serversided json:
{
"iTotalRecords":"6",
"iTotalDisplayRecords":"6",
"aaData": [
[
"1",
"sameek",
"sam",
"sam",
"sameek#test.com",
"1",
""
],...
Since all values are in aaData you don't need sAjaxDataProp at all.
Modified serverside json:
{
"iTotalRecords":"6",
"iTotalDisplayRecords":"6",
"myData": [
[
"1",
"sameek",
"sam",
"sam",
"sameek#test.com",
"1",
""
],
Now the values are in myData. so you need to tell dataTables where to find the actual data by setting:
"sAjaxDataProp" : "myData"
Here is a Plunker

As there are 4 columns, add the following in "aoColumns":
"aoColumns": [
{ "mData": null }, // for User Detail
{ "mData": "LoginId" },
{ "mData": "Name" },
{ "mData": "CreatedDate" }
]
For undefined length, I have tried the following code and it's working:
$('#example').dataTable({
"aLengthMenu": [[100, 200, 300], [100, 200, 300]],
"iDisplayLength": 100,
"iDisplayStart" : 0,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "GetUser.ashx",
"sServerMethod": "POST",
"sAjaxDataProp" : "",
"aoColumnDefs": [ {
"aTargets": [ 0 ],
"mData": "download_link",
"mRender": function ( data, type, full ) {
return 'Detail';
}
} ],
"aoColumns": [
{ "mData": null },
{ "mData": "LoginId" },
{ "mData": "Name" },
{ "mData": "CreatedDate" }
]
});
The reference site to know more about aLengthMenu is:
https://legacy.datatables.net/ref#aLengthMenu

If you see this error, look at the json returned from the server, and then make sure that all of your datatable 'mData' values have matching entry. If you are also using a bean, check there as well.
And there is no need specify 'tr', 'td', etc for the table. It is much cleaner if you let jquery do that for you. Here is what my tables look like:
<table cellpadding="0" cellspacing="0" border="0" class="display" id="myTable" style="table-layout:fixed" ></table>
and then my datatable elements specify the width and column title:
{sTitle: "Column A", sWidth: "100px", mData: "idStringFromJson", bSortable: false},

Use $('#example').DataTable({.. (capital D) instead of $('#example').dataTable({..

When I ran into this problem, it was actually the result of an un-applied migration. I had restored a backup of the database, which hadn't yet had one of my recent schema migrations run on it, and once I ran migrations, everything worked fine.