jQueryTable - 实现数据表格化的重要插件

发布时间：2023-05-20

一、引入jQueryTable插件

在使用jQueryTable插件前，需要先引入jQuery库和jQueryTable插件，下面是引入代码：

<!-- 引入jQuery库 -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!-- 引入jQuery Table插件 -->
<link href="https://cdn.bootcss.com/jquery.tablesorter/2.30.5/css/theme.default.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery.tablesorter/2.30.5/js/jquery.tablesorter.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.tablesorter/2.30.5/js/jquery.tablesorter.widgets.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.tablesorter/2.30.5/js/jquery.tablesorter.pager.min.js"></script>

二、基本使用

jQueryTable插件可以快速将数据渲染成表格形式，下面是实现的代码示例：

<table id="my-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>20</td>
      <td>女</td>
    </tr>
  </tbody>
</table>
<script>
  $(document).ready(function() { 
    $('#my-table').tablesorter(); 
  });
</script>

代码解析：

  1. 首先，我们定义了一个table元素，并指定了它的id为"my-table"，为接下来的jQueryTable插件提供数据源。
  2. 接着，在$(document).ready()中调用了tablesorter()函数，将刚才定义的table元素转换成一个可以排序、分页的jQueryTable。
  3. tablesorter()是最基本、最简单的jQueryTable插件使用方式，如果我们要实现更多复杂的功能，可以通过tablesorter widget和pagination插件来实现。

三、高级使用——tablesorter widget和pagination插件

1. widget插件

tablesorter插件提供了丰富的widget插件，通过导入不同的widget插件，可以实现特定的功能，比如按列搜索、切换行颜色等等。 下面我们通过例子来演示如何添加widget插件：

<!-- 引入widget插件 -->
<script src="https://cdn.bootcss.com/tablesorter/2.30.5/js/extras/jquery.tablesorter.widgets.min.js"></script>
<table id="my-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>积分</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>李小明</td>
      <td>18</td>
      <td>男</td>
      <td>90</td>
    </tr>
    <tr>
      <td>赵芳芳</td>
      <td>20</td>
      <td>女</td>
      <td>80</td>
    </tr>
    <tr>
      <td>张鹏</td>
      <td>22</td>
      <td>男</td>
      <td>60</td>
    </tr>
  </tbody>
</table>
<script>
  $(document).ready(function() { 
    $('#my-table').tablesorter({
      // 使用widget插件
      widgets: [ 'zebra', 'columns', 'filter' ],
      // 按积分列排序
      sortList: [[3,1]]
    }); 
  });
</script>

代码解析：

  1. 首先，我们引入了widget插件文件。
  2. 接着，我们在tablesorter()函数内部传入了一个包含3个widget插件的数组，它们分别是：zebra（隔行换色）、columns（多列排序）和filter（按列搜索）。
  3. 我们还设置了排序规则，比如按“积分”列降序排列。

2. pagination插件

pagination插件允许我们将数据分页显示，避免数据过多造成页面混乱。 下面是如何引入pagination插件及代码演示：

<!-- 引入pagination插件 -->
<script src="//mottie.github.io/tablesorter/js/jquery.tablesorter.pager.min.js"></script>
<table id="my-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>积分</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>李小明</td>
      <td>18</td>
      <td>男</td>
      <td>90</td>
    </tr>
    <tr>
      <td>赵芳芳</td>
      <td>20</td>
      <td>女</td>
      <td>80</td>
    </tr>
    <tr>
      <td>张鹏</td>
      <td>22</td>
      <td>男</td>
      <td>60</td>
    </tr>
    <tr>
      <td>董明伟</td>
      <td>24</td>
      <td>男</td>
      <td>70</td>
    </tr>
    <tr>
      <td>汤一鸣</td>
      <td>26</td>
      <td>女</td>
      <td>75</td>
    </tr>
    <tr>
      <td>付丽丽</td>
      <td>28</td>
      <td>女</td>
      <td>85</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">
        <div class="pager"></div>
      </td>
    </tr>
  </tfoot>
</table>
<script>
  $(document).ready(function() { 
    $('#my-table').tablesorter({
      widgets: ['zebra','columns'],
      sortList: [[3,1]],
      // 开启分页
      widgetOptions: {
        pager_size: 10, //每页显示的行数
        pager_startPage: 0, // 开始显示的页码
        pager_countChildRows: false, // 是否显示子行数
        pager_output: '{startRow} -- {endRow} / {filteredRows} (总数: {totalRows})', // 分页信息文字
        pager_updateArrows: true, // 是否显示上一页下一页
        pager_fixedHeight: false, // 分页控件是否固定高度
        pager_removeRows: false, // 分页控件是否删除行
        pager_ajaxUrl: null // 分页控件使用AJAX
      }
    }); 
  });
</script>

代码解析：

  1. 我们需要在tfoot中添加一个class为pager的div元素，该元素是pagination插件的容器，用于渲染分页控件。
  2. 接着，在tablesorter()函数内部传入了一个包含pagination参数的widgetOptions，用于定义每页显示的行数、初始页码等等分页信息。注意pager_size参数定义每页显示多少行数据，pager_startPage定义初始的页码，pager_output定义分页信息，pager_updateArrows定义是否显示上一页下一页等控件。 至此，我们已经完成了一个比较完整的jQueryTable示例，除了基础的排序功能，我们还添加了widget插件和pagination插件来实现更多高级功能。
推荐文章