How to sort grades?

[nevonevo]

Hi there i am using tablesorter in my projects but i have an issue about the sorting of grades. I have grade list like (A, A+, B, B+, C, C+ etc.). When i sort the list, list seeing like that (A, A+, B, B+, C, C+ etc.). But A+ is greater than A and A+ must be shown before A. How can i do that? Best Regards.

[Mottie]

Hi @nevonevo!

To sort those grades you'll need a custom parser. Here is a demo and the code you need:

$(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-', 'D+', 'D', 'D-', 'F'],
        index = grades.indexOf(s.toUpperCase());
      return index > -1 ? index : s;
    },
    type: 'numeric'
  });

  $('table').tablesorter({
    theme: 'blue'
  });
});

[nevonevo]

thanks for the fast reply Mottie. But i want to learn how can i do this with multiple columns? My example code is below
<script> $(document).ready(function() { $("#bookietable").tablesorter( {sortList: [[1,0], [2,0], [3,0], [4,0]]} ); } ); </script>
i use this code for standart sorting and it works. But i tried your code like below but it's not working. I don't have much knowladge about javascript and i really don't know how can i do this.

<script> $(document).ready(function() { $(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-', 'D+', 'D', 'D-', 'F'], index = grades.indexOf(s.toUpperCase()); return index > -1 ? index : s; }, type: 'numeric' }); $("#bookietable").tablesorter( {sortList: [[1,0], [2,0], [3,0], [4,0]]} ); }); } ); </script>

[Mottie]

If you look in that demo, you'll see that the parser is set for the column using a class name in the header.

<th class="sorter-grades">Grades</th>

Add the "sorter-{parser-name}" class to every column that needs that parser.

[nevonevo]

@Mottie thanks for your help but still it's not working. I added the class name as you said and i use this code only. But still A comes before A+.
` <script>
$(document).ready(function()
{
$(function() {
$.tablesorter.addParser({
id: 'grades',
is: function() {
return false; // do not auto-detect this parser
},
format: function(s) {
var grades = ['A+', 'A', 'B+', 'B', 'C+', 'C', 'D+', 'D', 'F'],
index = grades.indexOf(s.toUpperCase());
return index > -1 ? index : s;
},
type: 'numeric'
});

$('#bookietable').tablesorter({
theme: 'blue'
});
});
}
);
</script>`

but there is a point i think. i fill the table with php and mysql. Is it the problem?

[Mottie]

i fill the table with php and mysql. Is it the problem?

No, php will render HTML and using $(document).ready(function(){...}) ensures that the code is run after the DOM is ready.

As an aside, in the jQuery documentation, you'll see that using $(document).ready() is not the recommended syntax. Use $(function(){...}) instead:

<script>
$(function() {
  $.tablesorter.addParser({
    id: 'grades',
    is: function() {
      return false; // do not auto-detect this parser
    },
    format: function(s) {
      var grades = ['A+', 'A', 'B+', 'B', 'C+', 'C', 'D+', 'D', 'F'],
        index = grades.indexOf(s.toUpperCase());
      return index > -1 ? index : s;
    },
    type: 'numeric'
  });
  
  $('#bookietable').tablesorter({
    theme: 'blue'
  });
});
</script>

As for why the code isn't working. I'd have to get you to reproduce the problem in the demo I shared to make it easier for me to troubleshoot it.

Or, are you saying the order is completely reversed? If so, you can reverse the order of the grades (demo):

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

  $('table').tablesorter({
    theme: 'blue'
  });
});

[nevonevo]

I tried all of ways which are you said. But still A comes before A+. I really don't know where is my mistake in the codes. But i drive crazy because your fiddle is working so your codes is perfect. But when i put the codes in to my page there is nothing. No effects.

[Mottie]

Are you adding the "sorter-grades" class name to the header?

[nevonevo]

Yes i added this class like this
<th class="sorter-grades" style="text-align: center; cursor: pointer;">Rating</th>

[Mottie]

Hmm, then add a debug: true option and look in the console (press F12 to open the developer panel and select the "Console" tab) to make sure the parser is being set:

$('table').tablesorter({
  theme: 'blue',
  debug: true
});

Also, is there anything else inside the table cells besides the "A+" and "A"?

[nevonevo]

There are few things on the console which you can look the images.

https://i.hizliresim.com/EgXyRq.png

https://i.hizliresim.com/j89QWj.png

https://i.hizliresim.com/BrqyAD.png

https://i.hizliresim.com/ZZ8OEk.png

I couldn't see A or A+ and maybe you can tell me where can i look for it.

[Mottie]

Oh!

It looks like the table is empty. Please make sure that your HTML is valid and contains one <thead> and one <tbody>.

It also looks like you're using the original tablesorter - v2.0.5b. If you want to keep using that version then use the headers option:

$('table').tablesorter({
  theme: 'blue',
  headers: {
    0: { sorter: 'grades' }, // use zero-based column index
    1: { sorter: 'grades' }
  }
});

[nevonevo]

it's working. The only problem is headers. really thank you so much for your help and you saved my much time with your help. And if you don't mind i just wanna ask last question. You know i was using sortList option for only some column can be sortable. Now i added this code and everycolumn can sortable not only my selected column. Can you know how can i do this? this is my code. You can see i make sortable only 1, 2, 3 and 4th column not others but it's not working.

<script>
$(function() {
  $.tablesorter.addParser({
    id: 'grades',
    is: function() {
      return false; // do not auto-detect this parser
    },
    format: function(s) {
      var grades = ['A+', 'A', 'B+', 'B', 'C+', 'C', 'D+', 'D', 'E+', 'E', 'F'],
        index = grades.indexOf(s.toUpperCase());
      return index > -1 ? index : s;
    },
    type: 'numeric'
  });

  $('#bookietable').tablesorter({
    theme: 'blue',
	debug: true,
	sortList: [[1,0], [2,0], [3,0], [4,0]],
  headers: {
    0: { sorter: 'grades' }, // use zero-based column index
    3: { sorter: 'grades' }
  }
  });
});
	</script>

[Mottie]

If I understand what you're asking, then inside the headers option, add a sorter: false to disable the sorting of a column using its zero-based index.

headers: {
  0: { sorter: 'grades' }, // use zero-based column index
  3: { sorter: 'grades' },
  5: { sorter: false } // disabled column
}

[nevonevo]

yes that's worked. Really thanks you for your help and saving my day @Mottie you are really great coder and person. best regards.

[Mottie]

I'm guessing this issue has been resolved, so I'm going to close it. If you continue to have problems, please feel free to continue the discussion in this thread.