我希望 table 在加载时使用 tablesorter 按特定顺序排序

Question

我有一个 table，它在我加载页面时显示如下。

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

可以使用 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.

将附加到动态选择中

请注意，在下面的代码片段中，我切换了 "Steve" 和 "Wade"，因此您可以看到 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>

我希望 table 在加载时使用 tablesorter 按特定顺序排序

I want the table to be sorted in a particular order on load using tablesorter

html

javascript

jquery

tablesorter