bootstrap table服务器端分页和客户端，供大家参考，具体内容如下
服务器端分页
注意服务器端数据的返回的格式
[json]必须包含：total节点（总记录数），rows节点（分页后数据）
即：{“total”:24,”rows”:[…]}
我要评论
$('#test-table').bootstraptable({
//请求方法
method: 'get',
//是否显示行间隔色
striped: true,
//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
cache: false,
//是否显示分页（*）
pagination: true,
//是否启用排序
sortable: false,
//排序方式
sortorder: "asc",
//初始化加载第一页，默认第一页
//我设置了这一项，但是貌似没起作用，而且我这默认是0,- -
//pagenumber:1,
//每页的记录行数（*）
pagesize: 10,
//可供选择的每页的行数（*）
pagelist: [10, 25, 50, 100],
//这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
url: "/test/testtable.action",
//默认值为 'limit',传给服务端的参数为：limit, offset, search, sort, order else
//queryparamstype:'',
////查询参数,每次调用是会带上这个参数，可自定义
queryparams: queryparams : function(params) {
var subcompany = $('#subcompany option:selected').val();
var name = $('#name').val();
return {
pagenumber: params.offset+1,
pagesize: params.limit,
companyid:subcompany,
name:name
};
},
//分页方式：client客户端分页，server服务端分页（*）
sidepagination: "server",
//是否显示搜索
search: false,
//enable the strict search.
strictsearch: true,
//indicate which field is an identity field.
idfield : "id",
columns: [{
field: 'id',
title: 'id',
align: 'center'
}, {
field: 'testkey',
title: '测试标识',
align: 'center'
}, {
field: 'testname',
title: '测试名字',
align: 'center'
},{
field: 'id',
title: '操作',
align: 'center',
formatter:function(value,row,index){
//通过formatter可以自定义列显示的内容
//value：当前field的值，即id
//row：当前行的数据
var a = '<a href="" >测试</a>';
}
}],
pagination:true
});
客户端分页
将sidepagination属性设为“client”即可
服务器返回json数据必须包含data节点（展示数据）
当数据量较少，只有上千条数据时，一次性将所有数据返回给客户端，无论点下一页，或搜索条件时，不向服务端发请求，实现全文检索。
如果大家还想深入学习，可以点击进行学习，再为大家附3个精彩的专题：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
Android 入门第七讲01-数据存储（数据存储概述，文件存储（raw和asserts目录读写，data/data/包名目录读写，sdcard目录读写），SharedPreferences读写）
vue-axios系列:axios拦截器，配置请求头，配置请求参数
Vuejs 针对 安卓低版本 、ios9.x 不兼容 ES6语法导致失效解决方法
网友评论