Jquery DataTable Sorting Numeric value column not working properly

Question

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

Answer 1

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

Answer 2

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