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