这次给大家带来bootstarp+table使用方法分析，bootstarp+table使用的注意事项有哪些，下面就是实战案例，一起来看一下。
我们在一次项目开发中使用到了原生的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使用方法分析的详细内容。