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的分页类了。