<!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='#' onclick='method()'>修改</a>";
var b = "<a href='#' onclick='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>
bootstrap-table真实交互数据
3星 · 超过75%的资源 需积分: 20 121 浏览量
2018-01-13
20:38:06
上传
评论 1
收藏 294KB ZIP 举报 
bootstrap-table真实交互数据.zip （18个子文件） 
bootstrap-table真实交互数据 
index.html 4KB url 
bootstrapTable.json 1KB js bootstrap-table.js 107KB jquery-1.11.1.js 276KB bootstrap3.3.7.min.js 36KB bootstrap-table-zh-CN.js 1KB .idea workspace.xml 9KB deployment.xml 346B modules.xml 318B bootstrap-table真实交互数据.iml 458B font 
fontawesome-webfont.svg 135KB fontawesome-webfont.eot 25KB FontAwesome.otf 48KB fontawesome-webfont.woff 29KB fontawesome-webfont.ttf 54KB css bootstrap-table.css 7KB bootstrap-theme.css 26KB bootstrap.3.3.7.css 143KB资源评论
smszyg2019-03-26可以使用，建议直接可以展示效果
weixin_421573052018-10-09只有前端，没有后端代码，坑
Miss_LL2019-03-03都说了是模拟后台数据了。后台传那个json就可以了呀
