jQuery DataTable title-numeric sort

Question

I'm using the jQuery DataTables plugin, and the title-numeric custom sort plugin. The sort works ALMOST. I have a table with the td tags containing a hidden span element like so...

<td><span title="5">DATA HERE</span></td>
<td><span title="4">DATA HERE</span></td>
<td><span title="2">DATA HERE</span></td>
<td><span title="17">DATA HERE</span></td>
<td><span title="10">DATA HERE</span></td>

Using the hidden title numeric sort on those columns, when in DESC order I get the cells with the title in the following order

5,4,2,17,10

Where I would have expected it to sort as

17,10,5,4,2

Any ideas as to what could be wrong? Here is how I'm initializing the table...

$(document).ready(function() {
     $('#myTable').dataTable({
          "oLanguage": { "sSearch": "Filter Data" },
          "iDisplayLength": -1,
          "bJQueryUI": true,
          "sPaginationType": "full_numbers",
          "aoColumns": [
               { "sType": "title-numeric" }
           ]
      });
});

Plugin code added before table is initialized is here:

    jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "title-numeric-pre": function ( a ) {
        var x = a.match(/title="*(-?[0-9\.]+)/)[1];
        return parseFloat( x );
    },

    "title-numeric-asc": function ( a, b ) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },

    "title-numeric-desc": function ( a, b ) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
} );

Kirbos · Accepted Answer · 2014-02-25 23:01:19Z

1

Looks like it's doing a string comparison. Have you tried converting a and b to integers with the parseInt function before comparing them?

 return ((parseInt(a) < parseInt(b)) ? -1 : ((parseInt(a) > parseInt(b)) ? 1 : 0));

etc...

Edit:

I'm not sure then :( This exact code works for me:

<!DOCTYPE html>
<html>
    <head>
        <link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>

        <meta charset=utf-8 />
        <title>Test</title>
    </head>
    <body>
        <div class="container">
            <table id="mytable" class="display" width="100%">
                <thead>
                    <tr>
                        <th>Col1</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                      <td><span title="5">This is 5</span></td>

                    </tr>
                    <tr>
                        <td><span title="4">This is 4</span></td>
                    </tr>
                    <tr>
                        <td><span title="2">This is 2</span></td>

                    </tr>
                    <tr>
                        <td><span title="17">This is 17</span></td>
                    </tr>
                    <tr>
                        <td><span title="10">This is 10</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

With this as the javascript:

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "title-numeric-pre": function ( a ) {
        var x = a.match(/title="*(-?[0-9\.]+)/)[1];
        return parseFloat( x );
    },

    "title-numeric-asc": function ( a, b ) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },

    "title-numeric-desc": function ( a, b ) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
} );

$(document).ready( function () {
  $('#mytable').DataTable({
     "oLanguage": { "sSearch": "Filter Data" },
          "iDisplayLength": -1,
          "bJQueryUI": true,
          "sPaginationType": "full_numbers",
          "aoColumns": [
               { "sType": "title-numeric" }
           ]
  });
} );

edited Feb 25, 2014 at 23:01

answered Feb 25, 2014 at 18:01

Kirbos

4461 gold badge3 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Phil Over a year ago

When I try that the column won't sort at all anymore.

mainguy Over a year ago

@Kirbos just out of curiosity, isn't that the same script that the OP gave as an (not working) example? Did you forget to include your changes?

Kirbos Over a year ago

It seems to be the same to me as well. That's why I said that I'm not really sure what the problem is, as the (seemingly) exact same code worked for me. Beats me, @mainguy. Edit: The only thing I can assume is that maybe OP didn't have the newest version of the .js or .css files, since that's really the only thing that wasn't shown in OP's code.

John - Not A Number · Accepted Answer · 2014-02-27 17:31:21Z

1

This is what I use for my title-numeric sort extensions (I also wanted to filter out any non-numeric characters):

$.fn.dataTableExt.oSort['title-numeric-asc'] = function (a, b) {
    var x = a.match(/title="*(-?[0-9\.]+)/)[1];
    var y = b.match(/title="*(-?[0-9\.]+)/)[1];
    x = parseFloat(x);
    y = parseFloat(y);
    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};

$.fn.dataTableExt.oSort['title-numeric-desc'] = function (a, b) {
    var x = a.match(/title="*(-?[0-9\.]+)/)[1];
    var y = b.match(/title="*(-?[0-9\.]+)/)[1];
    x = parseFloat(x);
    y = parseFloat(y);
    return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};

answered Feb 27, 2014 at 17:31

John - Not A Number

6494 silver badges9 bronze badges

Comments

mainguy · Accepted Answer · 2014-02-26 15:29:38Z

0

Okay, I am not sure what's wrong here.

I just changed your html to a second column for to see the sorting better, added <tr>s and used your question code (Just removed the UI part).

  <tr>
    <td><span title="5">DATA HERE</span>
      </td>
      <td>5</td>
  </tr>
  <tr>
    <td><span title="4">DATA HERE</span>
    </td>
    <td>4</td>
  </tr>

When you look at this plunker everything works as expected.

answered Feb 26, 2014 at 15:29

mainguy

8,3312 gold badges34 silver badges40 bronze badges

Collectives™ on Stack Overflow

jQuery DataTable title-numeric sort

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related