我们在一次项目开发中使用到了原生的php + html5的前后分离技术。 php接口设计如restful ，如果不知道restful那请百度把，返回的所有数据均为json。
当涉及到分页后因为前端页面使用了bootstarp 为了兼容问题，我们继续试用了bootstarp table插件来进行数据分页
bootstarp 有两种配置方法，写法与应用类似 easyui这种老ui框架，不过我觉得easyui 是真的好用，并且easyui的异步tree 真的是太强了当然还有很多现成的tree组件，因为公司前端缺少，我们php兼职写页面，你懂得哈。
下面介绍bootstarp配置 ：js 配置
<table id ='std-list'></table> <script> $('#std-list').bootstraptable({ url: 'controller/standard.php?op=query', method: post, //使用post发送数据的时候 需要设置contentype不然后台无法接受数据 contenttype: application/x-www-form-urlencoded; charset=utf-8, toolbar: '#toolbar1', // 对应你table里面的工具栏 pagination: true, //打开分页 pagesize: 10,//一页放多少个数据 showrefresh: true,//现实刷新按钮 showtoggle: true, pagelist: [10, 20],//设置可以每页现实的数据量 strictsearch: true, singleselect: false,//单选多选 search: false,//搜索框（当前端分页时候，搜索框可以自己过滤数据，后端分页无意义） oncheck: function(row, $element) {}, queryparams: function(params) { //向后台发送的参数都可以写这里 var temp = { pagesize: params.limit, //页面大小 pagenumber: params.offset, //页码 op: s, conds: data }; return temp; }, rowstyle: function(row, index) { //改变行样式。也可以使用cellstyle改变单元格样式 console.log(1); }, sidepagination: 'server', columns: [{ checkbox: true }, { field: 'standardnumber', title: '标准编号' }, { field: 'standardname', title: '标准名称' }, { field: 'standardlevel', title: '标准类别' }, { field: 'qystandardnumber', title: '企标编号' }, { field: 'referstandardnumber', title: '引用标准' }, { field: 'filename', title: '查看全文', formatter: function(value, row, index) { //格式化你想要的数据 if(value) { var list = []; list.push(value); for(var i = 0; i < list.length; i++) { //console.log(list[i]); if(list[i] != null) { var str = list[i]; var conds = str.indexof('.'); var type = str.substr(conds, str.length) if(type == ".pdf") { return '<img src="img/pdf.png" onclick="looktext(\'' + index + '\')">' + '</img>'; } else if(type == .txt) { return '<img src="img/txt.png" onclick="looktext(\'' + index + '\')">' + '</img>'; } else if(type == .docx || type == .doc) { return '<img src="img/doc.png" onclick="looktext(\'' + index + '\')">' + '</img>'; } else if(type == .png || type == .jpg) { return '<img src="img/img.png" onclick="looktext(\'' + index + '\')">' + '</img>'; } } } } else { return ''; } } }, { field: 'iscancel', title: '是否作废' } ], rowstyle: function(value, row, index) { if(value) { var list = []; list.push(value); for(var i = 0; i < list.length; i++) { console.log(list[i].iscancel); if(list[i].iscancel == '是') { console.log(1); var style = {}; style = { css: { 'color': 'red' } }; return style; } else { var style = {}; style = { css: { 'color': '' } }; return style; } } } } }); </script>
附上表格，以上分页为后台分页，后台分页返回的数据格式应为 ｛total:'你的总数'，rows:'你的数据'｝前台分页只需要返回｛rows：rows｝即可
最后附上我的json格式
{
total: 2, rows: [{ id: 6, standardname: 1994, standardnumber: gb-100-1994, standardlevel: , qystandardnumber: , referstandardnumber: , referlevel: , classnumber: , draftunit: , publishdate: , implementdate: , inputdatabasedate: , iscancel: 否, canceldate: , structureid: , oldstandardnumber: , oldstandardname: , standardmemo: , usedepartment: , filename: null, filecontent: null }, { id: 4, standardname: 4, standardnumber: 4, standardlevel: , qystandardnumber: 1, referstandardnumber: , referlevel: , classnumber: , draftunit: , publishdate: , implementdate: , inputdatabasedate: , iscancel: 是, canceldate: , structureid: , oldstandardnumber: , oldstandardname: , standardmemo: , usedepartment: , filename: 变电设备在线监测i2接口网络通信规-范.pdf, filecontent: {\database\:\m2018.php\,\key\:\4\} }]
}
这里我对html直接生成table 不做介绍了。详细可以查看文档或者百度
在使用bootstarp table 中我们有时候会涉及到更新页面一个数据或者删除一个数据的操作，删除和更新的是指定行
需要获取 index 下表
例如下面的updaterow 更新指定行
$('#std-list').bootstraptable('updaterow', { index: getrowindex('#std-list', row[current]), row: { standardname: standardname, standardlevel: standardlevel, qystandardnumber: qystandardnumber, referstandardnumber: referstandardnumber, usedepartment: usedepartment, referlevel: referlevel, classnumber: classnumber, structureid: structureid, draftunit: draftunit, publishdate: publishdate, inputdatabasedate: inputdatabasedate, oldstandardnumber: oldstandardnumber, oldstandardname: oldstandardname, standardmemo: standardmemo, canceldate: canceldate, oldstandardnumber: oldstandardnumber, oldstandardname: oldstandardname, standardmemo: standardmemo, iscancel: cancellation } });
我推荐使用这种方法获取index（下标）
function getrowindex(sel, row) { var data = $(sel).bootstraptable('getdata'); for(var i = 0; i < data.length; i++) { if(row == data[i]) return i; } return -1; }
前端分页神器值得一用！
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
promisea+的实现步骤详解
easycanvas绘图库在pixeler项目开发中使用实战总结
以上就是bootstarp+table使用方法分析的详细内容。