bootstrap-table插件实现ajax服务端分页显示

利用bootstrap-table插件实现ajax服务端分页

1、引入bootstrap-table插件核心js、css以及中文语言文件

网上提供的在线cdn，如果加载时间过长，请下载插件到项目引入

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>

<!-- Latest compiled and minified Locales -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>

2、初始化bootstrap-table插件

1.在html页面table中加入id或class

2.初始化js

$('#table').bootstrapTable({
url: "{:U('Index/getRows')}",
//这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
//默认值为 'limit',传给服务端的参数为：limit, offset, search, sort, order Else
//请求方法
method: 'get',
//是否显示行间隔色
striped: true,
//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
cache: false,
//是否显示分页（*）
pagination: true,
//是否启用排序
sortable: false,
//排序方式
sortOrder: "desc",
//初始化加载第一页，默认第一页
//我设置了这一项，但是貌似没起作用，而且我这默认是0,- -
pageNumber:1,
//每页的记录行数（*）
pageSize: 10,
//可供选择的每页的行数（*）
pageList: [10, 25, 50, 100],

queryParamsType:'',
////默认为空时传递
//sortOrder:desc
//pageSize:10
//pageNumber:2

//分页方式：client客户端分页，server服务端分页（*）
sidePagination: "server",
//是否显示搜索 搜索input name= searchText 服务端获取该值查询即可
search: true,

//Enable the strict search.
strictSearch: true,
//Indicate which field is an identity field.
idField : "id",

columns: [{
field: 'id',
title: '序号'
}, {
field: 'zwmc',
title: '职位描述'
}, {
field: 'gsmc',
title: '公司名称'
}, {
field: 'zwyx',
title: '职位月薪'
}, {
field: 'gzdd',
title: '工作地点'
}, {
field: 'gxsj',
title: '发布时间'
},  {
field: 'link',
title: '详情'
},

],

});

3.服务端数据返回格式

这是最重要的一步，服务端以php为例，需要返回固定的json格式，网上文章说的不是很清楚
json格式形如{“total”:24,”rows”:[…]}
total分页总条数，rows数据，需要与html页面js中column字段对应
可以先拼装数组，在使用json_encode()函数
数组形式：

{
"total": "1500",
"rows": [
{
"id": "1489",
"link": "http://jobs.zhaopin.com/468496635250092.htm",
"zwmc": "银行总行java项目定岗实训生",
"gsmc": "武汉软清科技有限公司",
"zwyx": "4001-6000",
"gzdd": "武汉",
"gxsj": "03-20"
},
{
"id": "1488",
"link": "http://jobs.zhaopin.com/468496635250028.htm",
"zwmc": "IT信息技术专员（可实习）java实训生（双休 五险一金）",
"gsmc": "武汉软清科技有限公司",
"zwyx": "4001-6000",
"gzdd": "武汉",
"gxsj": "03-20"
},
{
"id": "1487",
"link": "http://jobs.zhaopin.com/468496635250093.htm",
"zwmc": "生物制药工程开发实习",
"gsmc": "武汉软清科技有限公司",
"zwyx": "4001-6000",
"gzdd": "武汉",
"gxsj": "03-20"
},
{
"id": "1486",
"link": "http://jobs.zhaopin.com/468496635250080.htm",
"zwmc": "银行总行java项目定岗实训生",
"gsmc": "武汉软清科技有限公司",
"zwyx": "4001-6000",
"gzdd": "武汉",
"gxsj": "03-20"
},
{
"id": "1485",
"link": "http://jobs.zhaopin.com/468496635250083.htm",
"zwmc": "销售/文员/技工转IT技术岗位",
"gsmc": "武汉软清科技有限公司",
"zwyx": "4001-6000",
"gzdd": "武汉",
"gxsj": "03-20"
},
{
"id": "1484",
"link": "http://jobs.zhaopin.com/468496635250021.htm",
"zwmc": "电子软件工程师/技术员 （急招数名）",
"gsmc": "武汉软清科技有限公司",
"zwyx": "4001-6000",
"gzdd": "武汉",
"gxsj": "03-20"
},
{
"id": "1483",
"link": "http://jobs.zhaopin.com/468496635250166.htm",
"zwmc": "急聘IT软件 java实训生（双休 五险一金）",
"gsmc": "武汉软清科技有限公司",
"zwyx": "4001-6000",
"gzdd": "武汉",
"gxsj": "03-20"
}
]
}

总结：一个是queryParamsType:'', 留空时，传递分页条数和页码，可以通过调试模式查看网络查看就比较清楚了；二是服务端的数据格式要按照固定格式。这两点弄清楚，就很容易上手使用了。使table插件，服务端只有总条数和分页数据即可，就可以实现ajax无刷新分页及分页显示条数及搜索功能。可以丢掉tp的分页类了。