Develop Reference

Date sorting in Datatables not sorting as expected

When I sort a table by the date field using the uk-date plugin the dates seem to be messed up by nulls. These nulls seem to stay in the middle of the order. Then after it then restarts the dates. The data is populated from an array. When i try modifying the code it seems to either break the date formatting or make it so nulls are always at the start. Rather than start or end based on if you sort asc/desc. It is also using date time moment plugin.
<script>var resp_53 = true; var datatablearraycols_53_a = [{"orderable": false, "bSortable": false, "className":"no-sort", "searchable": false,},null,null,null,null,null,{ type: "date-uk" },null,null,null,null,null,null,null,
];</script>
{
"columns": datatablearraycols_53_a,
"data": datatablearray_53_a,
"processing": true,
stateSave: true,
"responsive": resp_53,
"scrollX": !resp_53,
"columnDefs": [{
"targets": 'no-sort',
"orderable": false,
}],
"dom": '<fB<t>lip>',
"buttons": [
{ extend: 'csvHtml5', text: 'Export' }
]
});

Hide columns not working properly with server side processing in jquery datatables

I am using jquery datatables(1.10.9) with server side processing.
tab = $('#'+div).dataTable( {
"sDom": 'T<"clear">frltip',
"aaSorting": [],
"bAutoWidth" : false,
"sPaginationType": "full_numbers",
"sScrollY": "550px",
"sScrollX": "100%",
"bFilter": true,
"aoColumnDefs": [{ "bSearchable": false, "aTargets": [ 2 ] },{ "bSortable": false, "bSearchable": false, "aTargets": [ 12 ] },{ "bSortable": false, "bSearchable": false, "aTargets": [ 13 ] }],
"oTableTools": {},
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": 'data/getdata',
"fnServerParams": function ( aoData ) {
},
"fnRowCallback": function( nRow, aData, iDisplayIndex ){
// Processing data like:
// $('td:eq(2)', nRow ).html( 'Test' );
}
});
// Hiding 5th column
tab.fnSetColumnVis( 5, false); //Does not work.Removes the column header but not the row data.
How do I get hide column to work properly with server side processing in jquery datatables?

I got this to work as follows:
fnDrawCallback: function() {
$('td:nth-child(3),th:nth-child(3)').hide();
}]
tab.fnSetColumnVis( 3, false) will not work because it re-fetches the data.Hence, had to do it using simple old jquery.

fnSetColumnVis() function has 3rd property (true or false) that not rebind the data. so try with fnSetColumnVis(3,false,flase) may be it can help.

You do it when you set up the datatable, using "ColumnDefs" thusly, where targets is the number of the column you want to hide:
tab = $('#'+div).dataTable( {
"columnDefs": [{ targets: 5, visible: false }],
"sDom": 'T<"clear">frltip',
"aaSorting": [],
"bAutoWidth" : false,
...
If you have 2 hidden columns, it will look like this:
"columnDefs": [{ targets: 5, visible: false }, { targets: 6, visible: false }],
Note: column numbering starts at 0.

Datatable sorting issue in IE working fine in Chrome

I have column with String type but it holding the value of time in this format dd-MMM-yyyy HH:mm:ss. When i do sorting its working fine in chrome. But in IE its not working. Please could you help us to resolve this issue?
$(document).ready(function () {
dataTestTable = $('#programListId').DataTable(
{
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bInfo": false,
"bSort": true,
"aaSorting": [[0, "asc"]],
"order": [[12, "desc"]],
"paging": true,
"columnDefs": [
{"targets": 0, "render": $.fn.dataTable.render.ellipsis(12, true)},
],
}
);
testTable = dataTestTable;
}
Below code also not working for Sorting
"columnDefs": [
{"targets": 12, "type":'Date'},
...
]

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.

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