bootstrap表格
1、表格插件
官方下载地址
中文帮助文档
2、实际应用
采用jquery调用表格,代码如下:
html:
<table data-toggle="table" id="deviceTable">
</table>
js:
var $table = $('#deviceTable');
$table.bootstrapTable({
url: "data/device2.json",
dataType: "json",
pagination: true, //分页
pageList:[5,6],
pageSize:6,
singleSelect: false,
idField:"id",
sidePagination: "client", //客户端处理分页()
columns: [
{
title: '设备名称',
field: 'name',
align: 'center',
valign: 'middle'
},
{
title: 'ip地址',
field: 'ip',
align: 'center',
valign: 'middle',
},
{
title: '描述',
field: 'description',
align: 'center'
},
{
title: '操作',
field: 'id',
align: 'center',
formatter:function(value,row,index){
var e = '<a href="#" mce_href="#" onclick="edit(\''+ row.id + '\')">编辑</a> ';
var d = '<a href="#" mce_href="#" onclick="del(\''+ row.id +'\')">删除</a> ';
return e+d;
}
}
]
});
客户端处理时数据格式为json数组:
[
{"id":"1","name":"NT890","ip":"192.168.21.45","description":"描述信息"},
{"id":"2","name":"NT123","ip":"192.168.21.45","description":"描述信息"}
]
需要注意的是当采用server处理分页时数据格式为:
{"rows":[
{"id":"1","name":"NT890","ip":"192.168.21.45","description":"描述信息"},
{"id":"2","name":"NT123","ip":"192.168.21.45","description":"描述信息"}
],
"total":?,
"page":?
}