DEV Community

pavan ツ
pavan ツ

Posted on

2 4

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!

Neon image

Next.js applications: Set up a Neon project in seconds

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Get started →

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay