jQuery -数据库不工作

jQuery - TableSorter not working

本文关键字：工作 数据库 jQuery      更新时间：2023-09-26

我似乎不能弄清楚为什么表排序器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">

加载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>

你有几个问题，我可以看到:

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

之后加载。

其次,sortable.js的文档说你需要将你的表分类为"sortable"。

那么试试这个:

<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">
相关文章：