Keep rows with certain values always at the bottom while sorting in jquery tablesorter plugin

Question

I'm using JQuery Table sorter plugin(http://tablesorter.com/docs/) in my application it works great but I would like to exclude certain rows which has N/A for the clicked column while sorting and keep them always at the end.

As far as i have checked if we put elements in tfoot it will always remains at the bottom. But i wanted to display those rows initially only when sorting happens I would like to move them at the end.

Below is my HTML

<table id="myTable" class="tablesorter">
    <thead>
        <tr>
            <th>Code</th><th>Name</th><th>Count</th><th>Percentage</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1011</td><td>Cheif Executives</td><td>2385</td><td>20%</td>
        </tr>
        <tr>
            <td>1012</td><td>General and Operations Manager</td><td>2986</td><td>N/A</td>
        </tr>
        <tr>
            <td>1013</td><td>Advertising Promo Managers</td><td>3412</td><td>30%</td>
        </tr>
        <tr>
            <td>1014</td><td>Marketing Managers</td><td>2154</td><td>5%</td>
        </tr>
    </tbody>
</table>

Javascript

In JavaScript we can specify a text extraction method for table sorter. While sorting higher to lower I'm trying to make the N/A as ' ' which has lower ASCII value than other symbols so the row will be in lower end of the table. Similarly lower to higher sorting i need to replace N/A with ~ symbol to give N/A a higher value to make to appear at the end.

Below is the code snippet I'm trying

$(document).ready(function () {
            $("#myTable").tablesorter({
                textExtraction: function (node) {
                    var s = '';
                    var hdrs = $("#myTable th");
                    var direction = '';
                    hdrs.each(function (index) {
                        if ($(this).hasClass('headerSortDown')) {
                            direction = 'down';
                            return;
                        }
                        else if ($(this).hasClass('headerSortUp')) {
                            direction = 'up';
                            return;
                        }

                    });
                    if (direction === 'down')
                        s = $(node).text().replace('N/A', ' ');
                    else if (direction === 'up')
                        s = $(node).text().replace('N/A', '~');
                    return s;
                },
                cssAsc: 'headerSortUp',
                cssDesc: 'headerSortDown'
            });
        });

But it seems like the css classes are not getting added by default so the result is not as expected. My expected Result during both sort is the row while has code 1012 should always appear below the table.

Note i cant add any static classes to the table markup for the N/A values since it is from the table is generated dynamically

Thanks in advance

Answer 1

I'm glad that I fixed this issue by myself and I'm happy to share this to folks who might need this in future. There are two things to this issue

1. Tell table sorter to consider the N/A as empty. this can be done using the textExtraction(method used to extract values from the cells for sorting) method that table sorter provides
2. Ask tableSorter to keep all the empty values to the bottom using emptyTo attribute

Below is the code

$(document).ready(function () {
            $("#myTable").tablesorter({
                textExtraction: function (node) {
                    var txt = $(node).text();
                    txt = txt.replace('N/A', '');
                    return txt;
                },
                emptyTo: 'bottom'
            });
        });