0

I am using DataTables plugin version 1.10.13. In my table, column at index 5 contains a Bootstrap progress bar, and the resulting HTML looks somewhat like this:

<td>
    <div class="progress"
           style="margin-bottom:0px;"
           title="10% Complete"
             data-placement="top"
             data-toggle="popover"
             data-trigger="hover"
             data-html="true"
             data-content="
                Some data here...
             "
    >
      <div class="progress-bar " role="progressbar" aria-valuenow="10"
           aria-valuemin="0" aria-valuemax="100" style="width: 10%;">
        <span class="sr-only">10</span>
      </div>
    </div>
</td>

Now, without any options, DataTables sorts this columns alphabetically, so records with the progress bar of 90 are at the very top, while the one with 100, 10, and finally 0 are at the bottom. The problem is that 100 is supposed to be at the very top.

I tried html-num, html-num-fmt, num, and a handful of others, but they either don't work or sort alphabetically. Basically, the goal here is to sort numerically, and not alphabetically. I also tried displaying the value (e.g. 10 or 100) inside the <td> itself, but it didn't change anything. At this point, I am not even sure how DataTables reads the HTML markup. Does it look at the <span> with the class of sr-only?

Can someone suggest a solution?

EDIT

@Gyrocode.com created a great jsfiddle. I added more records to show the problem: jsfiddle

Improve this question
7
  • Works even without specifying the type, see jsfiddle.net/k4aauf0n Commented Mar 6, 2017 at 21:53
  • @Gyrocode.com It sort alphabetically. So, if you have 0, 10, 20, 50, 90, 100 it would sort them in descending order as 90, 50, 20, 100, 10, 0. I am trying to get 100, 90, 50, 20, 10, 0. Try jsfiddle.net/k4aauf0n/1/ and click on Progress <th>. I do appreciate the fiddle though, thanks! Commented Mar 6, 2017 at 22:10
  • 1
    Your fiddle has a typo, it works for me without any sorting plugins, see jsfiddle.net/k4aauf0n/2. However there is also num-html but again it works for me without plugins. Commented Mar 6, 2017 at 22:36
  • Huh, a typo? Can't see any Commented Mar 6, 2017 at 22:41
  • One of the progress bars in your example had value 90 but width of 10% which looked as result of a wrong sort operation. Here is how column appear for me in jsfiddle.net/k4aauf0n/2, it's sorted correctly from 10,30,90,90 to 100, see i.sstatic.net/9WsLb.png Commented Mar 7, 2017 at 1:54

1 Answer 1

Reset to default
3

Use num-html sorting plugin.

$.extend($.fn.dataTableExt.oSort, {
    "num-html-pre": function ( a ) {
        var x = String(a).replace( /<[\s\S]*?>/g, "" );
        return parseFloat( x );
    },

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

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

$(document).ready(function() {
    var table = $('#example').DataTable({
       columnDefs: [
          { targets: 0, type: 'num-html' }
       ]
    });
} );

See updated jsFiddle for code and demonstration.

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

5 Comments

Any reason why it seemed to worked in your example before, but not in mine now?
@Alex, not sure yet. It has type detection mechanism built-in but using num-html forces use of specific sorting method.
Thank you once again, you've put a fair bit of work into this. I've tried it on my page with 100+ records, and even with v. 1.10.9 (I previously tried v. 1.10.13, in which num-html is now deprecated) the progress bars are randomly sorted, and I can't see any logical patterns whatsoever. I guess at this point, I'll take a step further and report this on their github page and in their forums. Thanks again for your input!
@Alex, you must be doing something wrong as it works for me even with 1.10.13, see jsfiddle.net/k4aauf0n/8
After trial and error, I finally found out that the Bootstrap popover was messing up sorting. Once removed, sorting went back to normal, even without any options for DataTables. I guess it modified innerHtml or sth like that. Anyways, thanks

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.