Jquery DataTable Sorting Numeric value column not working properly

17,063

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

Share:
17,063
Satinder singh
Author by

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, 2022

Comments

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

    enter image description here

    enter image description here

    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();