Question

我想对每一行进行编号，而不是将这些数字移动/排序。第一列＃需要是静态/固定的。所有其他列可以根据需要进行排序。

这可能吗？

这是我的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>

Answer 1

我认为最好的方法是编写自己的小部件（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']
});

注意：我在github上分发了一个tablesorter插件的副本，其中包含一个字母数字排序，更多示例页面和以前未记录的选项。万一你感兴趣：）

Answer 2

你可以使用CSS，虽然这取决于拥有最新浏览器的用户，而且，虽然我无法测试它，但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

我将当前的编号留在原处，以比较这些方法。在实践中，如果您选择应用此解决方案，则应该（可能）将其删除。

Answer 3

你可以有两个表格内嵌或浮动

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>

TABLESORTER - 如何在TABLESORTER中使第一列静态/固定？

3 个答案: