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<开发者_StackOverflow/th>
                    <th>Auth QTY</th>
                    <th>Cur QTY</th>
                    <th>RELS</th>
                    <th>WIP QTY</th>
                    <th>TBD</th>
                </tr>
            </thead>

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 :)

You could use CSS for this, though that's dependent on the users having an up-to-date browser, and is, while I can't test it off-hand, probably unsupported in IE:

table {
    counter-reset: rowNum;
}

tbody tr {
    position: relative;
    counter-increment: rowNum;
}

thead tr:before {
    content: ''; /* important, otherwise the columns don't line up properly */
}

tbody tr:before {
    content: counter(rowNum);
    left: -2em;
}

JS Fiddle demo.

I left the current numbering in place, to compare the approaches. In practice this should (probably) be removed, if you choose to apply this solution.

you could have two tables displayed inline or floated left

http://jsfiddle.net/AfmPz/

td, th
{
  padding:3px;
}
table
{
  float:left;
}

<table>
  <thead>
    <tr>
      <th>#</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
    </tr>
  </tbody>
</table>
<table>
  <thead>
    <tr>
      <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>
  <tbody>
    <tr>
      <td>na</td>
      <td>na</td>
      <td>na</td>
      <td>na</td>
      <td>na</td>
      <td>na</td>
      <td>na</td>
      <td>na</td>
    </tr>
    <tr>
      <td>na</td>
      <td>na</td>
      <td>na</td>
      <td>na</td>
      <td>na</td>
      <td>na</td>
      <td>na</td>
      <td>na</td>
    </tr>
    <tr>
      <td>na</td>
      <td>na</td>
      <td>na</td>
      <td>na</td>
      <td>na</td>
      <td>na</td>
      <td>na</td>
      <td>na</td>
    </tr>
  </tbody>
</table>