DEV Community

pavan ツ
pavan ツ

Posted on

Jquery datatables Sorting

Hi guys, I was having trouble sorting manual data for custom data present in column like A, A++ , A+, A-- , A-. The Jquery plugin for this one I am using is- datatables.net . Currently the sorting is working fine for conventional datatypes such as Int - 1,2 3,4,5 Char- A, B, C, D. Does anyone know how to make it work on manual data as well?

Top comments (4)

Collapse
 
pytesus profile image
pavan ツ • Edited

Thanks @rhymes & Ben.
After lots of research, I came across:
github.com/Mottie/tablesorter/issu...,

and used it like this:

//sorting for grades
    $(function() {
      $.tablesorter.addParser({
        id: 'grades',
        is: function() {
          return false; // do not auto-detect this parser
        },
        format: function(s) {
          var grades = ['A++','A+','A','B++','B+','B','C++','C+','C','A--','A-','B--','B-','C--','C-','NA'],
            index = grades.indexOf(s.toUpperCase());
          return index > -1 ? index : s;
        },
        type: 'numeric'
      });
      $('#datatable').tablesorter({ headers: { 6: {sorter:"grades"} } });
    });

Table is now getting sorted as expected :)

Collapse
 
rhymes profile image
rhymes • Edited

What if you create a custom plugin for sorting?

According to datatables.net/reference/option/co... sorting is done on a few predefined types BUT:

It is expected that the above options will cover the majority of data types used with DataTables, however, data is flexible and comes in many forms, so additional types with different effects can be added through the use of plug-ins. This provides the ability to sort almost any data format imaginable!

There's an example on how to create custom sorting here: datatables.net/examples/plug-ins/s...

Collapse
 
ben profile image
Ben Halpern

That's an interesting problem. Maybe modify the plugin to translate the input before it computes the sort? If it replaced, for example, "+" with "A" and "-" with "B" before computing the sort it would work, right?

I'm not sure this is the cleanest way to go about it but it's what comes to mind. It wouldn't be too tough to pop into the code and insert a .replace() in.

Collapse
 
seankilleen profile image
Sean Killeen

Hey! I've noticed that in this post you use "guys" as a reference to the entire community, which is not made up of only guys but a variety of community members.

I'm running an experiment and hope you'll participate. Would you consider changing "guys" to a more inclusive term? If you're open to that, please let me know when you've changed it and I'll delete this comment.

For more information and some alternate suggestions, see dev.to/seankilleen/a-quick-experim....

Thanks for considering!