Using jQuery TableSorter to sort columns containing drop-down (SELECT) tags and dollar signs ($)

Question

I use the fabulous jQuery TableSorter plugin to automatically add sorting functions to table columns (just by clicking on each column heading). This works flawlessly for all columns except a few of them.

1) One of the cells in the column contains dollar signs in front (for example, $ 20, $ 10, $ 5). Sorting does not work properly; it is sorted alphabetically (and since the entire contents of the cells starts with $, they all combine incorrectly). What code will force the sorter to start with the second character, while ignoring the dollar signs?

2) The other column has dynamic drop-down lists (1 SELECT tag in each cell), and I would like it to sort the column alphabetically by the current selected values ​​inside each SELECT tag. Any ideas?

If you can at least point me in the right direction and give me an idea of ​​how to set up sorting in each of the two scenarios, I would really appreciate it.

Thanks in advance!

Answer 1

2) Another column has dynamic drop-down lists (1 SELECT tag in each cell), and I would like to sort the column alphabetically by the current selected values ​​inside each SELECT tag. Any ideas?

I was just trying to achieve this, and this is impossible in the literal sense. The string that the parser function receives as a parameter (..format: function (s) {..) has already been removed from the tags. Therefore, it is not possible to determine which value is selected. To do this, you will need to change the table pointer.

Now I had to add a hidden option up with the selected value in it. This is a workaround. But, like the fact that you do not even need to write your own parser and tablesorter to sort correctly.

<option style="display:none">B</option> <option value="A">A</option> <option value="B" selected="selected">B</option> <option value="C">C</option> ... <option style="display:none">A</option> <option value="A" selected="selected">A</option> <option value="B">B</option> <option value="C">C</option> 

The rows after which the tables are sorted are as follows:

• V.A.V.S.
• Aabc

Answer 2

It worked for me. some adjustment may be required if the option is not selected ...

 $(document).ready(function(){ // Sortable tables $('table').tablesorter ({ cancelSelection: true, sortList: [[0,0]], textExtraction: function(node) { // Check if option selected is set if ($(node).find('option:selected').text() != "") { return $(node).find('option:selected').text(); } // Otherwise return text else return $(node).text(); } }); }); 

Answer 3

If this helps someone who is trying to do this in the future, I found a solution:

 2) Another column has dynamic drop-downs (1 SELECT tag in each cell), and I would like it to alphabetically sort the column by the currently selected values inside each SELECT tag. Any ideas? 

using fork tablesorter Mottie , It allows you to customize the text retrieval functions at the column level (see the Mottie documentation ). For the column that I wanted to sort (the first in this case, therefore, index 0), I initialized:

 textExtraction: { 0: function(node) { return $(node).find('option:selected').text(); } } 

I could not see an elegant way to make it work with the original, unfortunately.

Answer 4

For non-standard data (nothing but plain text or numbers, you need to write a parser and add it through your API. See here: http://tablesorter.com/docs/example-parsers.html

I had to do this for table cells that had a numerical value (percentage) and an image in the same cell. You can try this for simple "$ 1.58" to sort by number 1.58

 // add parser through the tablesorter addParser method $.tablesorter.addParser({ // set a unique id id: 'money', is: function(s) { // return false so this parser is not auto detected return false; }, format: function(s) { // format your data for normalization var str = s.replace('$', '').replace(',','') ; return parseFloat(str); }, // set type, either numeric or text type: 'numeric' });