A-A+
使用Bootstrap-Table实现分页和排序
相关文章索引:
- 使用Bootstrap-Table实现分页和排序
- 使用Bootstrap-Table实现行折叠
前几天寻找了几个表格插件之后,开始研究如何使用其中的某个插件来实现需求,需求如下:
1.能够使用jquery.load直接加载一个片段过来,作为tbody的内容。
2.能够点击列头排序。
3.能够分页,而这种分页能够支持服务器端分页。
最后通过Bootstrap-Table这款插件实现,实现的具体过程如下:
1.引用插件
按官网的Getting started引用该插件所必须的css和js文件,如下:
- <link rel="stylesheet" href="bootstrap.min.css">
- <link rel="stylesheet" href="bootstrap-table.css">
- <script src="jquery.min.js"></script>
- <script src="bootstrap.min.js"></script>
- <script src="bootstrap-table.js"></script>
- <-- put your locale files after bootstrap-table.js -->
- <script src="bootstrap-table-zh-CN.js"></script>
2.建立Table
在HTML页面中建立一个用于展示数据的Table,这个Table在随后的步骤中将被Bootstrap-Table初始化,如下:
- <table id="dataTable">
- <thead>
- <tr>
- <th data-field="fullname" data-sortable="true">名称</th>
- <th data-field="shortname" data-sortable="true">简称</th>
- <th data-field="address" data-sortable="true">地址</th>
- <th data-field="linkman" data-sortable="true">联系人</th>
- <th data-field="tel" data-sortable="true">联系电话</th>
- <th>操作</th>
- </tr>
- </thead>
- <tbody id="dataBody">
- </tbody>
- </table>
4.初始化Table
使用Javascript将Table初始化,并且自定义一些函数来满足之前的需求,代码如下:
- $(document).ready(function(){
- initTable("dataTable");
- });
- //自定义ajax
- function ajaxRequest(params){
- //访问服务器获取所需要的数据
- //比如使用$.ajax获得请求某个url获得数据
- $.ajax({
- type : 'post',
- url : '/list.do',
- data : parames.data,
- success : function(e){
- if(e.code == 200){
- //表格加载数据
- parames.success({
- total : total,//符合查询条件的数据总量
- rows : [{}]//创建一个空行,此处要注意,如果去除,将不会显示任何行
- });
- //加载一个片段,形如<tr><td>..</td>...</tr><tr><td>..</td>...</tr>
- $.ajax({
- type : 'post',
- url : '/body.do',
- data : parames.data,
- dataType : 'html',
- success : function(e){
- $("#dataBody").html(e);
- }
- });
- }
- }
- });
- }
- //自定义参数
- function postQueryParams(params) {
- params.cname = $("#customerName").val();
- return params;
- }
- //初始化
- function initTable(tableId){
- $("#" + tableId).bootstrapTable({
- classes : "table table-bordered table-hover table-striped",//加载的样式
- ajax : "ajaxRequest",//自定义ajax
- search : false,//不开启搜索文本框
- sidePagination : "server",//使用服务器端分页
- pagination : "true",//开启分页
- queryParams : "postQueryParams",//自定义参数
- pageSize : 8,//每页大小
- pageList : [8, 16, 32, 64]//可以选择每页大小
- });
- }
- //查询时,先销毁,然后再初始化
- $("#btnSearch").click(function(){
- $("#dataTable").bootstrapTable('destroy');
- initTable("dataTable");
- });
经过以上构建,dataTable就可以满足开始的需求,排序和分页均由服务器端完成,数据不必在服务器端进行转换,而是通过加载一个页面片段来实现,可以更加方便的开发。效果如下:

排序这个不需要写js就可以实现吗
使用的是服务端分页和排序,所以都是由后端完成的
升序和降序是哪个参数控制的?
升序和降序是不需要自己传递参数的,如果你在
@RequestParam(value = “sort”, required = false)String orderName,@RequestParam(value = “order”, required = false)String orderType 后端获取到的值是 null 是怎么回事?
如果是第一次加载,会获取到Null;如果从来没有点击过列头的排序按钮,也会是Null
作者还在吗。请问我排序功能已经实现,但是那个小箭头出不来怎么弄….
在th标签内加data-sortable=”true”了吗?
你好~请问下 如果由前端实现 默认排序 应该怎么实现呢??
前端还真没有试过,这些都是后端排序和分页的例子,可以看看它的API
也就是需要后端 来实现排序?我看这个文档里 有个sortable 是手动点击排序的
作者。。我问下你引用的”bootstrap-table.js”和”bootstrap-table.css”是哪个版本的,是哪下的,我在官网没有找到哎。。我写了data-sortable=”true,但是箭头也是没有出现
有点旧的版本,bootstrap-table – v1.10.0 – 2016-01-19
parames.success 这个parames是什么?
initTable时,会自定义Ajax方法,这个parames就是这个方法的参数,bootstrap-table会自动为这个参数赋值,使用调试工具追踪会发现包含一些参数,比如分页、页大小等等。