怎么将show tables 表1与show tables 表2结果一起展现出来

转载

mob64ca140f29e5 2024-07-14 12:40:35

文章标签 java python javascript js css 文章分类 架构后端开发

tablesorter排序

在开发网站时，我们经常需要显示一些表格数据。我们可能需要显示从罗马到伦敦的下一班航班，在所选日期范围内可用的酒店，或由SitePoint等出版商发行的最新书籍。 HTML为表格数据提供了一个元素，毫不奇怪，它称为table 。它的问题在于该元素没有允许您根据特定条件（例如，价格从低到高）对行进行排序的API。

由于缺少API，已经开发并发布了多个JavaScript库来解决此问题。在本文中，我将向您介绍Tablesorter（实际上是它的一个分支），它是用于客户端表排序的jQuery插件。

什么是Tablesorter？

的tablesorter由罗布驻军是原来的一个分支的tablesorter通过开发库克里斯蒂安·巴赫。 Tablesorter是一个简单的jQuery插件，可基于一个或多个给定列的值提供动态行排序，并且还可以对使用HTML table元素创建的table进行分页。正如我在引言中提到的那样，此插件有助于填补这些不是HTML固有的常用功能的空白。作为客户端库，它的主要优点之一是我们的用户无需重新加载他们要访问的页面即可对数据进行排序。此外，客户端排序通常非常快，除非要排序的数据量很大。

您会喜欢这个库的地方是它的简单性。在最基本的情况下，您必须包括该库，然后调用一个名为tablesorter()的方法，以提供对表的数据进行排序的可能性。最后，此插件包含大量文档，可帮助您处理项目中可能遇到的大多数情况。

现在您知道了此插件的全部功能，让我们看看如何在您的网站上使用它。

Tablesorter入门

要使用Tablesorter，您必须下载它并将其包含在打算使用它的页面中。您可以通过几种不同的方式获得Tablesorter。第一种是通过访问其GitHub存储库，而第二种是通过以下Bower命令。

bower install jquery.tablesorter

该插件由一个主要JavaScript文件，其他可选JavaScript文件以及几个主题组成。下载后，您必须包含一个主题，可以在“ css”文件夹下找到，如下所示：

<link rel="stylesheet" href="css/theme.default.css" />

在这种情况下，代码包含“默认”主题。您必须在jQuery库之后导入JavaScript文件：

<script src="path/to/jquery.js"></script>
<script src="js/jquery.tablesorter.min.js"></script>

准备好在网站上使用Tablesorter之前，需要执行的最后一步。您必须将类tablesorter分配给要与插件一起使用的所有表。这仅出于样式目的需要，但这是您真正想要做的，否则将不会应用主题。尽管该插件仍然可以使用，但是您的用户对所添加的功能一无所知。

添加tablesorter类

您可以通过两种方式将类添加到感兴趣的表中。首先，也是更简单的方法是在HTML源代码中手动添加类名称。但是，如果您无法访问或修改HTML源代码该怎么办？在这种情况下，您可以使用JavaScript动态添加它。假设您要允许用户对页面中每个表的数据进行排序。为此，您可以编写如下代码，并将其放在页面底部：

var tables = document.getElementsByTagName('table');

for (var i = 0; i < tables.length; i++) {
   tables[i].className += ' tablesorter';
}

这为您提供了最广泛的浏览器兼容性。但是，如果只需要支持现代浏览器，则可以利用classList API和其他方法来检索DOM元素，例如queryselectorall() 。

使用jQuery，前面的代码可以简化为：

$('table').addClass('tablesorter');

此时，我们可以调用tablesorter()方法来公开排序功能。下面显示了该插件的最小使用示例：

$('table').tablesorter();

基本演示

为了让您看到此插件的实际效果，我们将使用下表：

<table class="tablesorter">
   <thead>
      <tr>
          <th>Title</th>
          <th>Author</th>
          <th>Price (in dollars)</th>
      </tr>
   </thead>
   <tbody>
      <tr>
          <td>The CSS3 Anthology, 4th Edition</td>
          <td>Rachel Andrew</td>
          <td>29.00</td>
      </tr>
      <tr>
          <td>Instant jQuery Selectors</td>
          <td>Aurelio De Rosa</td>
          <td>13.26</td>
      </tr>
      <tr>
          <td>Killer UX Design</td>
          <td>Jodie Moule</td>
          <td>29.00</td>
      </tr>
      <tr>
          <td>Jump Start CSS</td>
          <td>Louis Lazaris</td>
          <td>19.00</td>
      </tr>
   </tbody>
</table>

将到目前为止列出的摘录放在一起，将得到以下演示：

单击标题，您将看到表格现在可以排序了！

值得一提的是Tablesorter可以在所有标准HTML table使用，因此您必须在表格中使用thead和tbody 。

设置默认顺序

有时，您希望显示来自服务器的未排序数据已经根据给定条件进行了排序。使用Tablesorter，可以通过将对象常量传递给tablesorter()方法来轻松实现。该对象文字可以包含多个选项，以配置插件以所需的方式工作。官方文档中报告了所有可用选项的列表。

怎么将show tables 表1与show tables 表2结果一起展现出来_css

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。原价$ 11.95 您的完全免费

免费获得这本书

假设您要基于第一列的值以降序对页面上的所有表进行排序。为此，您必须传递一个sortList属性，该属性的值是一个2D数组，其中第一个元素代表要排序的列的从0开始的索引，第二个元素代表降序为1 ，而升序为0 。因此，要实现所讨论的目标，您必须编写：

$('table').tablesorter({
   sortList: [[0, 1]]
});

通过设置多列顺序标准，可以进一步扩展此示例。如果要基于第一列的值以降序排序和第三列的值以升序排序表，则可以编写：

$('table').tablesorter({
   sortList: [[0, 1], [2, 0]]
});

下面显示了一个使用先前示例的实时演示，它也可以作为JSFiddle使用：

在表中添加条纹

为了提高数据的可读性，您应该对行使用两种不同的颜色：一种用于奇数行，另一种用于偶数行。使用Tablesorter执行此任务非常容易。您所要做的就是在配置对象中添加一个名为widgets的属性，并将包装在数组中的zebra值传递给该对象：

$('table').tablesorter({
   widgets: ['zebra']
});

在我们看到这段代码的结果之前，我想展示一下其他内容。

更改默认主题

如果要更改默认主题，则必须将CSS文件替换为表示所需主题的文件。因此，假设您要使用“蓝色”主题。您必须替换该行：

<link rel="stylesheet" href="css/theme.default.css" />

带有：

<link rel="stylesheet" href="css/theme.blue.css" />

接下来，您必须通过在配置对象中设置一个名为theme的属性（其值表示您要使用的主题的名称）来通知插件更改。在这种情况下，因为使用了“蓝色”主题，所以您必须编写：

$('table').tablesorter({
   theme: 'blue'
});

在我们观看现场演示之前，我想向您介绍最后一个功能：分页。

使用Tablesorter分页数据

分页功能由Tablesorter作为外部插件提供，因此在我们将其应用于页面之前，我们必须包含相关JavaScript和CSS文件。分页插件与Tablesorter一起下载，并且两个文件都位于名为“ addons / pager”的文件夹中。将这些文件包含在页面中之后（请记住，必须在Tablesorter插件之后包含JavaScript文件），您必须按照以下报告为寻呼机设置标记：

<div id="pager" class="pager"> 
   <img src="addons/pager/icons/first.png" class="first"/> 
   <img src="addons/pager/icons/prev.png" class="prev"/> 
   <span class="pagedisplay"></span>
   <img src="addons/pager/icons/next.png" class="next"/> 
   <img src="addons/pager/icons/last.png" class="last"/> 
   <select class="pagesize" title="Select page size"> 
      <option selected="selected" value="2">2</option> 
      <option value="3">3</option>
      <option value="4">4</option>
   </select>
   <select class="gotoPage" title="Select page number"></select>
</div>

此时，您必须通过指定包含页面所有元素的包装器来调用tablesorterPager()方法。基于先前的标记，您必须编写：

$('#my-table')
   .tablesorter()
   .tablesorterPager({
      container: $('#pager')
   });

下面显示了使用分页器，更改了默认主题以及还使用斑马条纹小部件的表的示例，该表也可以作为JSFiddle使用：

结论

在本文中，我向您介绍了Tablesorter的分支，Tablesorter是一个jQuery插件插件，用于将标准HTML表转换为可排序的表，而无需刷新页面。该插件可以成功解析和排序多种类型的数据，包括单元格中的链接数据。通过使用此插件，您还可以向数据添加分页，以便于阅读。如果您喜欢这个主意但不喜欢这个插件，并且想要一个替代方案，建议您查看DataTables 。