A-A+

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

2016年02月05日 技术 评论 15 条 阅读 3,553 次

相关文章索引：

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

  14.     </tbody>

  15. </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

觉的不错？可以关注我的公众号↑↑↑
标签：

15 条留言  访客：0 条  博主：0 条

  1. 西子 2016年09月26日 16:26  -49楼  回复

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

    • 哼哼的泰迪熊 2016年10月10日 15:16  地下1层  回复

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

  2. moncal 2016年10月20日 11:51  -48楼  回复

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

    • 哼哼的泰迪熊 2016年11月01日 10:40  地下1层  回复

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

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

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

    • 哼哼的泰迪熊 2017年08月19日 00:53  地下1层  回复

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

  4. 浪白 2017年08月21日 10:03  -46楼  回复

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

    • 哼哼的泰迪熊 2017年08月22日 18:13  地下1层  回复

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

  5. 独白 2017年08月28日 15:10  -45楼  回复

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

    • 哼哼的泰迪熊 2017年08月28日 18:29  地下1层  回复

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

      • 独白 2017年08月29日 10:29  地下2层  回复

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

  6. 花开 2017年09月27日 15:49  -44楼  回复

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

    • 哼哼的泰迪熊 2017年10月09日 09:12  地下1层  回复

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

  7. bling 2019年09月16日 16:38  -43楼  回复

    parames.success 这个parames是什么？

    • 哼哼的泰迪熊 2019年09月16日 17:01  地下1层  回复

      initTable时，会自定义Ajax方法，这个parames就是这个方法的参数，bootstrap-table会自动为这个参数赋值，使用调试工具追踪会发现包含一些参数，比如分页、页大小等等。

给我留言

Copyright © 字痕随行 保留所有权利.   Theme  Ality

用户登录

分享到：