jQuery - TableSorter 不工作

Question

我似乎无法弄清楚为什么 tablesorter jQuery 插件似乎不起作用。我已经包含了 JavaScript 文件和 css 文件（虽然不是必需的）并对其进行了初始化。有什么想法吗？

<script type="text/javascript" src="<?php echo $this->getThemePath()?>/js/sortable.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $("#supplierTable").tablesorter();
    });
</script>

<table class="tablesorter table table-striped table-hover table-curved" id="supplierTable" name="supplierTable">

Answer 1

加载 jQuery TableSorter 插件脚本和主题后，需要将已加载的主题传递给 jQuery.tablesorter 方法。

$(document).ready(function() {
  $("#supplierTable").tablesorter({
    // Select the theme that was loaded through CSS.
    theme: 'ice',

    // The default sorter will not work for the provided cell data.
    headers: {
      0: { sorter: 'text' },
      1: { sorter: 'text' },
      2: { sorter: 'text' }
    },
  });
});

<!-- Load jQuery if not already loaded. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Load the TableSorter plugin. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.5/js/jquery.tablesorter.min.js"></script>

<!-- Load a theme i.e. "ice". -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.5/css/theme.ice.min.css" rel="stylesheet" />

<table id="supplierTable" name="supplierTable" class="tablesorter table table-striped table-hover table-curved">
  <thead>
    <tr> <th>A</th> <th>B</th> <th>C</th> </tr>
  </thead>
  <tbody>
    <tr> <td>0.0, 0</td> <td>1.1, 0</td> <td>2.2, 0</td> </tr>
    <tr> <td>0.1, 1</td> <td>1.2, 1</td> <td>2.0, 1</td> </tr>
    <tr> <td>0.2, 2</td> <td>1.0, 2</td> <td>2.1, 2</td> </tr>
  </tbody>
</table>

Answer 2

我可以看到您有几个问题：

首先， 包含 JS 库的顺序很重要。您必须考虑依赖关系。这意味着您不能在一个依赖于另一个的库之前加载一个依赖于另一个的库。在这种情况下，sortable.js 依赖于 JQuery 库，因此必须在之后加载。

第二， sortable.js 的文档说您需要将表分类为“可排序”。

所以试试这个：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript" src="<?php echo $this->getThemePath()?>/js/sortable.js"></script>


    <script type="text/javascript">
        $(document).ready(function() {
            $("#supplierTable").tablesorter();
        });
    </script>

    <table class="tablesorter table table-striped table-hover table-curved sortable" id="supplierTable" name="supplierTable">