jquery datatable numeric sort issues

Question

I have integrated the datatable script for my table. I have the rank column. The data are like

I need the numeric sort here. For this i used the following code

{ "sType": "numeric", "aTargets": [ 0 ] }

In html code i used the following

<span style="display:none;">3</span> #3 in
<span style="display:none;">45</span> #45 in
<span style="display:none;">25</span> #25 in
<span style="display:none;">25</span> #15 in etc...

So in span tag i showed the numbers in hidden format.

But the sorting is not working for this cell. Please help me. Thanks

Updated On Dec15 =====================

{ "bVisible": false, "aTargets": [8] }, //set column visibility            
                {"sType": "numeric", "aTargets": [8] }, //define data type for specified columns
                {"iDataSort": 8, "aTargets": [3] } //sort based on a hidden column when another column is clicked 
                { "bVisible": false, "aTargets": [9] }, //set column visibility            
                {"sType": "numeric", "aTargets": [9] }, //define data type for specified columns
                {"iDataSort": 9, "aTargets": [5] } //sort based on a hidden column when another column is clicked       

Answer 1

Here's another way of solving your problem. Put the numeric values in a hidden column instead of the hidden span. In your datatables binding, point to the hidden column when the visible column header is clicked like this:

myTable.dataTable({        
    "aoColumnDefs": [
        { "bVisible": false, "aTargets": [hiddenColumnIndex] }, //set column visibility            
        {"sType": "numeric", "aTargets": [hiddenColumnIndex] }, //define data type for specified columns
        {"iDataSort": hiddenColumnIndex, "aTargets": [visibleColumnIndex] } //sort based on a hidden column when another column is clicked            
    ]
});​ 

Answer 2

It looks like you are using the datatables.net jquery plugin. If your underlying data is numeric, then use the mRender option to override the html rendered in the table cell (i.e., format the number to display #[actual number] in). With sorting enabled it should sort on the underlying data (refer to mData option). Note: This is for the current version of the plugin... if you have an older version then refer fnRender option.

For example:

"aoColumns": [
  { "mData": "StringColumn1" },
  { "mData": "StringColumn2" },
  {
    "mData": "Your Numeric Column",
    "mRender": function ( data, type, full ) {
                 return '#' + data + ' in';
               }
  }