Search code examples
htmltablesorter

TABLESORTER - How do I make the first column static/fixed in TABLESORTER?


I would like to number each row and NOT have those numbers move/sort. The first column # needs to be static/fixed. All other columns may sort as necessary.

Is this possible?

Here is my thead:

                <thead>
                <tr>
                    <th>#</th>
                    <th>Part No.</th>
                    <th>Board</th>
                    <th>Status</th>
                    <th>Auth QTY</th>
                    <th>Cur QTY</th>
                    <th>RELS</th>
                    <th>WIP QTY</th>
                    <th>TBD</th>
                </tr>
            </thead>

Solution

  • I think the best way would be to write your own widget (demo):

    // add custom numbering widget
    $.tablesorter.addWidget({
        id: "numbering",
        format: function(table) {
            var c = table.config;
            $("tr:visible", table.tBodies[0]).each(function(i) {
                $(this).find('td').eq(0).text(i + 1);
            });
        }
    });
    
    $("table").tablesorter({
        // prevent first column from being sortable
        headers: {
            0: { sorter: false }
        },
        // apply custom widget
        widgets: ['numbering']
    });
    

    Note: I've forked a copy of the tablesorter plugin on github with an alphanumeric sort, more example pages and previously undocumented options. Just in case you were interested :)