这是一个针对前后台交互的例子,可以直接套进项目中通畅运行。第二页之所以数据不对,是因为例子毕竟没有真正的后台,所以数据不对。但是可以套入项目中,就正常了。
重点:
- 其中bootstrap-table有一个search:truse搜索框的参数我没有使用,而是自己写了一个搜索框,因为那个参数只针对client(客户端数据才有效果,因为客户端数据得到了所有的数据了,但是例子是和后台交互的server服务端例子)
- sidePagination:'server'和‘client’区别在于前者是服务端交互数据,后者是客户端得到所有数据后自行进行分页和搜索
- responseHandler是处理前期后台传给表格的数据字段的绑定的函数
- queryParams是处理一系列操作(如分页、搜索、刷新等)后,发送给后台处理数据的函数
- 后台传递过来的数据最好是以以下格式:
{ "total":20, "offset":1, "limit":10, "rows"[ { "id": 0, "name": "Item 0" },{ "id": 1, "name": "Item 1" } ], }
一、准备json数据存入url/bootstrapTable.json中
{
"total": 12,
"offset":1,
"limit":10,
"data": [
{
"id": 0,
"name": "Item 0",
"datetime": 1372751992000
},{
"id": 1,
"name": "Item 1",
"datetime": 1372751992000
},{
"id": 2,
"name": "Item 2",
"datetime": 1372751992000
},{
"id": 3,
"name": "Item 3",
"datetime": 1372751992000
},{
"id": 4,
"name": "Item 4",
"datetime": 1372751992000
},{
"id": 5,
"name": "Item 5",
"datetime": 1372751992000
},{
"id": 6,
"name": "Item 6",
"datetime": 1372751992000
},{
"id": 7,
"name": "Item 7",
"datetime": 1372751992000
},{
"id": 8,
"name": "Item 8",
"datetime": 1372751992000
},{
"id": 9,
"name": "Item 9",
"datetime": 1372751992000
},{
"id": 10,
"name": "Item 10",
"datetime": 1372751992000
},{
"id": 11,
"name": "Item 11",
"datetime": 1372751992000
}
]
}
二、具体代码:里面有详细注解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/bootstrap.3.3.7.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
<link href="css/bootstrap-table.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/bootstrap3.3.7.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table.js"></script>
<script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript">
$(function () {
var $table = $("#table");
$table.bootstrapTable({
url:'url/bootstrapTable.json',
dataType:'json',
pagination:true,//分页
paginationPreText:'上一页',
paginationNextText:'下一页',
striped:true,//条纹
height:650,
showColumns:true,//内容列下拉框
showRefresh:true,//刷新按钮
sidePagination:"server",//服务端分页,还有client,不过不认为除非想玩单机版的,基本都是由服务端进行分页
toolbar:"#toolbar",
responseHandler:responseHandler,//接受后台传过来的值进行绑定处理的函数
queryParamsType:"undefined",
queryParams:queryParams,//一系列操作后向后台发送参数的函数
columns:[
{
title:"编码",
field:"id",
align:'center',
valign:"middle"
},{
title:"名称",
field:"name",
align:'center',
valign:"middle"
},{
title:"创建时间",
field:"datetime",
align:'center',
formatter:function (value,row,index) {
//日期时间戳转换
var time = new Date(value);
var y = time.getFullYear();//年
var m = time.getMonth() + 1;//月
var d = time.getDate();//日
var h = time.getHours();//时
var mm = time.getMinutes();//分
var s = time.getSeconds();//秒
return y+"-"+m+"-"+d+" "+h+":"+mm+":"+s;
}
},{
title:"操作",
align:'center',
formatter:function (value,row,index) {
var a = "<a href='#' οnclick='method()'>修改</a>";
var b = "<a href='#' οnclick='method()'>删除</a>";
return a+b;
}
}
]
});
});
function responseHandler(res){
return{
'total' : res.total,
"rows" : res.data,
"offset" : res.offset,
"limit" : res.limit
}
}
function queryParams(params){
//一系列操作后向后台传递的参数,这里可以传搜索框的值
var searchName = $("#searchName").val();
return{
"pageNumber" : params.pageNumber,
"pageSize" : params.pageSize,
"searchName" : searchName
}
}
function method() {
//修改和删除的方法
alert("修改和删除的方法");
}
</script>
</head>
<body>
<div id="toolbar">
<form class="form-inline">
<div class="form-group">
<label class="control-label">搜索名称</label>
<input type="text" class="form-control" id="searchName"/>
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
</div>
<table id="table"></table>
</body>
</html>
三、具体界面
四、具体代码下载:(要用webstrom运行才可看到数据)
http://download.csdn.net/download/miss_ll/10204235