Develop Reference

Uncaught TypeError: Cannot read property 'preparse' of null

I am trying to display dates in jquery data tables and fetching the data through a sql stored procedure. I am seeing this error when trying to use moment.js to have the correct format of date to display date in the data tables.
$(document).ready(function() {
var mesa = $('.datatable').DataTable({
filename: "LocationCodes",
responsive: true,
"bAutoWidth": false, // toggle this depending on how wide you want the table
"ajax": {
"url": "/controller/storedprocedure",
"type": "GET",
"datatype": "json"
},
"deferRender": true,
"responsive": true,
dom: 'Bfrtip',
"bSort": false,
buttons: ['excel', 'print'],
"columns": [{
"data": "FileName"
}, {
"data": "ProjectName"
}, {
"data": "RecordInsertTime",
"sType": 'date'
}],
"columnDefs": [{
targets: 2,
render: $.fn.dataTable.render.moment('2017-08-13', 'YYYY-MM-DD', 'en')
}]

As suggested in the question's comments, for those who wants to use the locale parameter in $.fn.dataTable.render.moment(), you need to load the file moment-with-locales.js instead of moment.js.
For example with a CDN (placed before DataTables):
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>

How to prevent sorting on specific table column - DataTable?

I don't want to sort my action column, so I did :
<th class="no-sort" >Actions</th>
and update my JS like this
$('table').DataTable( {
"bLengthChange": true,
"Filter": true,
"Info": true,
"bSort": true,
"bPaginate": false,
"searchHighlight": true,
"aoColumnDefs": [{
"bSort": false,
"aTargets": ["no-sort"]
}]
} );
I still see that it is sortable. 🤦🏻‍♂️
How do I stop that ?

The correct property is bSortable, not bSort. See the documentation
"aoColumnDefs": [{
"bSortable": false,
"aTargets": ["no-sort"]
}]
Also note that from your use of aoColumnDefs it appears you're using a very old version of DataTables; at least 5 years old in fact. I'd suggest upgrading it when possible.

Jquery Datatable is not getting recreated

I am creating jquery Datatable dynamically. ColumnNames and Rows Values are coming from Server side using Ajax call. Now, I need this datatable to be reinitialized everytime, so I used property "bDestroy": true, on every ajax call but after first display, DOM is getting broken. Here is my code
$('#JDatadt').dataTable({
"order": [],
"dom": "Bfrtip",
"buttons": ["csv", "excel", "pdf"],
"columnDefs": [{ "className": "dt-center", "orderable": false, "width": 20 }],
"bInfo": false,
"paging": true,
"processing": true,
"bDestroy": true,
"columns": dataObject[0].columns,
"data": dataObject[0].data
});
What is getting wrong here. Please help

Datatable by default try to sort column with index 0 if not specified.
if you don't want to sort by default with any column just add
"aaSorting": [[ ]] ,

you can destroy table by using fnDestroy() function of datatable. it will surely works for you.

How to sort only certain columns

I am using jQuery DataTables plugin to sort table data. I have four columns: Name, Position, Office and Age. What I want is user to be able to sort only Name and Age columns, not all the columns. But I am not able to stop sorting on OTHER columns. Can you please suggest something?

This code disable sorting, 0 - index of column.
For old version
aoColumnDefs: [
{
bSortable: false,
aTargets: [ 0 ]
}
]
for DataTables 1.10+
columnDefs: [
{ orderable: false, targets: 0 }
]
Especially for example, you need this
$(document).ready(function() {
$('#example').dataTable( {
"order": [[ 0, "desc" ]],
"aoColumns": [
null,
{ "bSortable": false },
{ "bSortable": false },
null
]
} );
} );
fiddle

Jquery DataTable Sorting Numeric value column not working properly

In my Asp.net app, I have a Gridview Control and bind it on code behind.
And on client side I use Jquery DataTable version 1.9.4 for better Sorting,Searching functionality, Here i got one problem Numeric value not sorting properly.
I googled and come to knw by using sType": "numeric" will solved, but when i use this my whole working stoped my Column is at 9 position so i set aTragets 9
Here's the JS FIDDLE
Javascript:
$(document).ready(function () {
$('#ctl00_ContentPlaceHolder1_GridView3').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
// "aoColumnDefs": [{ "sType": "numeric", "aTargets": [9] }]
});
});
Code nehind:
On Page_PreRender
if (GridView3.Rows.Count > 0)
{
GridView3.UseAccessibleHeader = true;
GridView3.HeaderRow.TableSection = TableRowSection.TableHeader;
}
On pageLoad :
GridView3.DataSource = sortedDT;
GridView3.DataBind();

I think aaSorting is what you have to use
$(document).ready(function () {
$('#ctl00_ContentPlaceHolder1_GridView3').dataTable({
"aaSorting": [[ 9, "asc"]], /*row count starts from 0 in datatables*/
"bJQueryUI": true,
"sPaginationType": "full_numbers"
// "aoColumnDefs": [{ "sType": "numeric", "aTargets": [9] }]
});
});
UPDATE
The problem was as stated in my comment It clearly does not understand the numeric datatype of the column. Your problem is that inside your ... you had also text.
See a working fiddle http://jsfiddle.net/6Pxwy/1

This is how i solved:
Gridview with Item template:
In Item template their might be label control, so it convert into span, we need to remove that span tag ie html tag using .contents().unwrap();
Code:
$("#Gridview_ID span").contents().unwrap();
$('#Gridview_ID ').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumns": [{ "bSortable": false }, null, null, { "sType": "numeric" }, { "sType": "date" }, null, { "bSortable": false}]
});
Gridview with Bound Field:
$('#Gridview_ID ').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumns": [{ "bSortable": false }, null, null, { "sType": "numeric" }, { "sType": "date" }, null, { "bSortable": false}]
});