Jquery DataTable Sorting Numeric value column not working properly
Solution 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}]
});
Solution 2
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
Satinder singh
I am a Full Stack Developer have a passion to create, solve, and deploy software applications. I have a great passion to learn new things. ForEach(minute in MyLife) { myExperience ++; } Blog: Codepedia Video: Subscribe Youtube Channel
Updated on June 04, 2022Comments
-
Satinder singh almost 2 years
In my Asp.net app, I have a Gridview Control and bind it on code behind.
And on client side I useJquery 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 setaTragets
9Here'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();