Я хочу, чтобы таблица сортировалась в определенном порядке при загрузке с помощью TableSorter - PullRequest
Новая
       13

Я хочу, чтобы таблица сортировалась в определенном порядке при загрузке с помощью TableSorter

0 голосов
/ 06 ноября 2018

У меня есть таблица, которая отображается так, когда я загружаю страницу. enter image description here

Но я хочу, чтобы предметы были в определенном порядке (математика, история, наука и физика), но имена профессоров должны быть отсортированы в порядке возрастания. enter image description here

Можно ли это сделать с помощью пользовательской сортировки таблиц? 

$('table').tablesorter({
    theme: 'blue'
});
<link href="https://mottie.github.io/tablesorter/css/theme.blue.css" rel="stylesheet"/>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tablesorter">
  <thead>
    <tr>
      <th>subject</th>
      <th>professor</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>math</td>
      <td>Jordan</td>
    </tr>
    <tr>
      <td>math</td>
      <td>Kent</td>
    </tr>
    <tr>
      <td>math</td>
      <td>Wayne</td>
    </tr>
    <tr>
      <td>history</td>
      <td>Richards</td>
    </tr>
    <tr>
      <td>history</td>
      <td>Xavier</td>
    </tr>
    <tr>
      <td>science</td>
      <td>Arthur</td>
    </tr>
    <tr>
      <td>science</td>
      <td>John</td>
    </tr>
    <tr>
      <td>physics</td>
      <td>Steve</td>
    </tr>
    <tr>
      <td>physics</td>
      <td>Wade</td>
    </tr>
  </tbody>
</table>

JSFiddle

Любая помощь приветствуется. Заранее спасибо.

1 Ответ

0 голосов
/ 06 ноября 2018

Чтобы установить пользовательский порядок сортировки, вы должны добавить свой собственный анализатор. Проверьте этот пример в документации.

Затем, чтобы упорядочить по умолчанию оба столбца, просто передайте sortList объекту конфигурации.

И для добавления дополнительной принудительной сортировки, которая будет добавлена ​​пользователем к динамическим выборам, используйте sortAppend.

Обратите внимание, что в приведенном ниже фрагменте я переключил «Стив» и «Уэйд», чтобы вы могли видеть, что sortList работает. 

// add parser through the tablesorter addParser method
$.tablesorter.addParser({
  // set a unique id
  id: 'subjects',
  is: function(s, table, cell, $cell) {
    // return false so this parser is not auto detected
    return false;
  },
  format: function(s, table, cell, cellIndex) {
    // format your data for normalization
    return s.toLowerCase()
      .replace(/math/,0)
      .replace(/history/,1)
      .replace(/science/,2)
      .replace(/physics/,3);
  },
  // set type, either numeric or text
  type: 'numeric'
});

$('table').tablesorter({
    theme: 'blue', 
    sortList: [[0,0], [1,0]],
    sortAppend : [[1,0]]
});
<link href="https://mottie.github.io/tablesorter/css/theme.blue.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>


<table class="tablesorter">
  <thead>
    <tr>
      <th class="sorter-subjects">subject</th>
      <th>professor</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>math</td>
      <td>Jordan</td>
    </tr>
    <tr>
      <td>math</td>
      <td>Kent</td>
    </tr>
    <tr>
      <td>math</td>
      <td>Wayne</td>
    </tr>
    <tr>
      <td>history</td>
      <td>Richards</td>
    </tr>
    <tr>
      <td>history</td>
      <td>Xavier</td>
    </tr>
    <tr>
      <td>science</td>
      <td>Arthur</td>
    </tr>
    <tr>
      <td>science</td>
      <td>John</td>
    </tr>
    <tr>
      <td>physics</td>
      <td>Wade</td>
    </tr>
    <tr>
      <td>physics</td>
      <td>Steve</td>
    </tr>
  </tbody>
</table>
...