我希望使用tablesorter在加载时按特定顺序对表进行排序

Question

我有一个表格，该页面在加载页面时显示如下。

但是我希望科目按特定顺序（数学，历史，科学和物理学）排列，但教授姓名应按升序排列。

可以使用tablesorter的自定义排序来完成此操作吗？

$('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

感谢您的帮助。预先感谢。

Answer 1

要设置自定义排序顺序，您应该添加自己的解析器。查看文档中的this示例。

然后，默认情况下要对两列进行排序，只需将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>