TABLESORTER - Как сделать первый столбец статическим / фиксированным в TABLESORTER? - PullRequest
Новая
       6

TABLESORTER - Как сделать первый столбец статическим / фиксированным в TABLESORTER?

1 голос
/ 26 июля 2011

Я бы хотел нумеровать каждую строку, а НЕ перемещать / сортировать эти числа.Первый столбец # должен быть статическим / фиксированным.Все остальные столбцы могут сортироваться по необходимости.

Возможно ли это?

Вот моя 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>

Ответы [ 3 ]

7 голосов
/ 27 июля 2011

Я думаю, что лучшим способом было бы написать собственный виджет ( 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']
});

Примечание: я разбудил копию плагина tableorter на github с буквенно-цифровой сортировкой, большим количеством страниц примеров и ранее недокументированными опциями. На всякий случай вам было интересно:)

3 голосов
/ 27 июля 2011

Вы можете использовать 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 .

Я оставил текущую нумерацию на месте, чтобы сравнить подходы.На практике это следует (вероятно) удалить, если вы решите применить это решение.

0 голосов
/ 26 июля 2011

Вы могли бы иметь две таблицы, отображаемые в строке или с плавающей точкой слева

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>
...