A-A+

使用Bootstrap-Table实现分页和排序

2016年02月05日 技术 评论 13 条 阅读 21,129 次

相关文章索引:

  1. 使用Bootstrap-Table实现分页和排序
  2. 使用Bootstrap-Table实现行折叠

前几天寻找了几个表格插件之后,开始研究如何使用其中的某个插件来实现需求,需求如下:

1.能够使用jquery.load直接加载一个片段过来,作为tbody的内容。

2.能够点击列头排序。

3.能够分页,而这种分页能够支持服务器端分页。

最后通过Bootstrap-Table这款插件实现,实现的具体过程如下:

1.引用插件

按官网的Getting started引用该插件所必须的css和js文件,如下:

  1. <link rel="stylesheet" href="bootstrap.min.css">
  2. <link rel="stylesheet" href="bootstrap-table.css">
  1. <script src="jquery.min.js"></script>
  2. <script src="bootstrap.min.js"></script>
  3. <script src="bootstrap-table.js"></script>
  4. <-- put your locale files after bootstrap-table.js -->
  5. <script src="bootstrap-table-zh-CN.js"></script>

2.建立Table

在HTML页面中建立一个用于展示数据的Table,这个Table在随后的步骤中将被Bootstrap-Table初始化,如下:

  1. <table id="dataTable">
  2.     <thead>
  3.     <tr>
  4.         <th data-field="fullname" data-sortable="true">名称</th>
  5.         <th data-field="shortname" data-sortable="true">简称</th>
  6.         <th data-field="address" data-sortable="true">地址</th>
  7.         <th data-field="linkman" data-sortable="true">联系人</th>
  8.         <th data-field="tel" data-sortable="true">联系电话</th>
  9.         <th>操作</th>
  10.     </tr>
  11.     </thead>
  12.     <tbody id="dataBody">
  13.     </tbody>
  14. </table>

4.初始化Table

使用Javascript将Table初始化,并且自定义一些函数来满足之前的需求,代码如下:

  1. $(document).ready(function(){
  2.     initTable("dataTable");
  3. });
  4. //自定义ajax
  5. function ajaxRequest(params){
  6.     //访问服务器获取所需要的数据
  7.     //比如使用$.ajax获得请求某个url获得数据
  8.     $.ajax({
  9.         type : 'post',
  10.         url : '/list.do',
  11.         data : parames.data,
  12.         success  : function(e){
  13.             if(e.code == 200){
  14.                 //表格加载数据
  15.                 parames.success({
  16.                     total : total,//符合查询条件的数据总量
  17.                     rows : [{}]//创建一个空行,此处要注意,如果去除,将不会显示任何行
  18.                 });
  19.                 //加载一个片段,形如<tr><td>..</td>...</tr><tr><td>..</td>...</tr>
  20.                 $.ajax({
  21.                     type     : 'post',
  22.                     url      : '/body.do',
  23.                     data : parames.data,
  24.                     dataType : 'html',
  25.                     success  : function(e){
  26.                         $("#dataBody").html(e);
  27.                     }
  28.                 });
  29.             }
  30.         }
  31.     });
  32. }
  33. //自定义参数
  34. function postQueryParams(params) {
  35.     params.cname = $("#customerName").val();
  36.     return params;
  37. }
  38. //初始化
  39. function initTable(tableId){
  40.     $("#" + tableId).bootstrapTable({
  41.         classes : "table table-bordered table-hover table-striped",//加载的样式
  42.         ajax : "ajaxRequest",//自定义ajax
  43.         search : false,//不开启搜索文本框
  44.         sidePagination : "server",//使用服务器端分页
  45.         pagination : "true",//开启分页
  46.         queryParams : "postQueryParams",//自定义参数
  47.         pageSize : 8,//每页大小
  48.         pageList : [8, 16, 32, 64]//可以选择每页大小
  49.     });
  50. }
  51. //查询时,先销毁,然后再初始化
  52. $("#btnSearch").click(function(){
  53.     $("#dataTable").bootstrapTable('destroy');
  54.     initTable("dataTable");
  55. });

经过以上构建,dataTable就可以满足开始的需求,排序和分页均由服务器端完成,数据不必在服务器端进行转换,而是通过加载一个页面片段来实现,可以更加方便的开发。效果如下:

bootstrap-table

哼哼的泰迪熊

13 条留言  访客:13 条  博主:0 条

  1. 西子

    排序这个不需要写js就可以实现吗

    • 黑色主题 哼哼的泰迪熊

      使用的是服务端分页和排序,所以都是由后端完成的

  2. moncal

    升序和降序是哪个参数控制的?

    • 黑色主题 哼哼的泰迪熊

      升序和降序是不需要自己传递参数的,如果你在

      标签内开启了排序(需要配置两个参数data-field=”username” data-sortable=”true”),在服务端接收时需要按照下面的方式:@RequestParam(value = “sort”, required = false)String orderName,@RequestParam(value = “order”, required = false)String orderType,其中sort表示使用该字段排序,order表示正序还是倒序
  3. wmzlly

    @RequestParam(value = “sort”, required = false)String orderName,@RequestParam(value = “order”, required = false)String orderType 后端获取到的值是 null 是怎么回事?

    • 黑色主题 哼哼的泰迪熊

      如果是第一次加载,会获取到Null;如果从来没有点击过列头的排序按钮,也会是Null

  4. 浪白

    作者还在吗。请问我排序功能已经实现,但是那个小箭头出不来怎么弄….

    • 黑色主题 哼哼的泰迪熊

      在th标签内加data-sortable=”true”了吗?

  5. 独白

    你好~请问下 如果由前端实现 默认排序 应该怎么实现呢??

    • 黑色主题 哼哼的泰迪熊

      前端还真没有试过,这些都是后端排序和分页的例子,可以看看它的API

      • 独白

        也就是需要后端 来实现排序?我看这个文档里 有个sortable 是手动点击排序的

  6. 花开

    作者。。我问下你引用的”bootstrap-table.js”和”bootstrap-table.css”是哪个版本的,是哪下的,我在官网没有找到哎。。我写了data-sortable=”true,但是箭头也是没有出现

    • 黑色主题 哼哼的泰迪熊

      有点旧的版本,bootstrap-table – v1.10.0 – 2016-01-19

给我留言

Copyright © 字痕随行 保留所有权利.   Theme  Ality 京ICP备14039894号

用户登录

分享到: