CODEWITHSUNDEEP
jqueryhtmldatatable
Vasanthan.R.P
Vasanthan.R.P

Reputation: 1287

jquery datatable numeric sort issues

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

enter image description here

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

Upvotes: 3

Views: 7138

Answers (2)

Sang Suantak
Sang Suantak

Reputation: 5265

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

Upvotes: 6

Jonathan Harrison
Jonathan Harrison

Reputation: 883

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';
               }
  }

Upvotes: 3

Related Questions