1 引包
<#assign base=request.getContextPath()/>
引入jQuery的框架,因为bootscriptTable依赖了jQuery
<script src="${base}/lib/jquery/jquery-3.1.1.min.js"></script>
引入bootstrap的css样式文件
<link href="${base}/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
引入bootstrap的js文件
<script src="${base}/lib/bootstrap/js/bootstrap.min.js"></script>
引入bootstrap-table的css样式文件
<link href="${base}/lib/bootstrap-table/css/bootstrap-table.min.css" rel="stylesheet">
引入bootstrap-table的js文件
<script src="${base}/lib/bootstrap-table/js/bootstrap-table.min.js"></script>
上面引入包不加${base}也可以,但是如果加了就一定要写第一行的
<#assign base=request.getContextPath()/>
任何一个前端框架都是绑定在一个标签元素上的
bootstrap-table就是绑定在table标签上
初始化表格
1 定义一个标签
1 通过javascript来初始化
2 使用jquery选择器定位标签调用bootstrapTable方法来初始化表格
$(’#标签id’).bootstrapTable({})
例
<table id="dataTable"></table>
<script type="text/javascript">
//在初始化方法中做表格初始化
$(function(){
$("#dataTable").bootstrapTable({
})
})
</script>
浏览器请求controller后页面展示下图,证明初始化成功
列明用column指定,列明是一个数组,数组里是很多对json字符串
CheckBox:代表页面表格中左侧支持勾选的复选框(可以全选、单选、多选)
title:是列明
field:是写具体数据的key
例
columns:[
{
checkbox:true
},
{
title:"接口ID",
field:"interfaceID"
},
{
title:"测试用例ID",
field:"testCaseId"
},
{
title:"测试用例名称",
field:"testCaseName"
}
]
浏览器请求controller的地址展示如下图,证明列表名称已建立
在columns之前要写上请求,这样请求的返回才能写到上面的表格中
<#assign base=request.getContextPath()/>
<script src="${base}/lib/jquery/jquery-3.1.1.min.js"></script>
<link href="${base}/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="${base}/lib/bootstrap/js/bootstrap.min.js"></script>
<link href="${base}/lib/bootstrap-table/css/bootstrap-table.min.css" rel="stylesheet">
<script src="${base}/lib/bootstrap-table/js/bootstrap-table.min.js"></script>
<div id="toolbar">
<button style="height: 30px;width: 50px" value="新增">新增</button>
<button style="height: 30px;width: 50px" value="删除">删除</button>
</div>
<table id="dataTable"></table>
<script type="text/javascript">
$(function(){
var urlName="/MyBatisController/selectForPage";
$("#dataTable").bootstrapTable({
url:urlName, 请求controller的地址,在urlName已经定义
method:"get", controller的请求方法
pageNumber:1, 初始化加载第一页,默认第一页
pageSize:5, 每页记录的行数,就是每页显示多少行
pageList:[5,10,15], 每页可调节展示的行数
pagination:true, 是否显示分页
sidePagination:"server", 分页方式:client与server两种分页方式,一般用后端分页,原因在分页的文章里已经讲了
cache:false, 是否用缓存,默认为true
queryParams:param, 入参,这里调用的是一个方法(就是写的是方法名称),就是下面的名为param的方法
paginationPreText:"上一页", 上一页
paginationNextText:"下一页", 下一页
toolbar:"#toolbar", toolbar就是放页面上增删改查按钮的,"#toolbar"是上面div标签的id,该div标签里都是按钮
height:500, 调整页面高度,为了让底部的分页、上一页、下一页能展示在页面
columns:[
{
checkbox:true
},
{
title:"接口ID",
field:"interfaceId" 上面请求成功后,获取的值:就是要与下图中绿框里的名称一一对应
},
{
title:"测试用例ID",
field:"testCaseId"
},
{
title:"测试用例名称",
field:"testCaseName"
}
]
})
})
function param(params) { 要用内置参数,所以方法要带参
var object={ 入参方法,要用一个对象 var aaa={};
pageSize:params.limit, 获取每页显示多少条
//params.offset 第一页展示0,若每页10条数据第二页展示10,第三页展示20,不会展示在页面,用F12能看到
//params.limit展示页数,是固定写法
pageNumber:(params.offset / params.limit)+1
};
return object;
}
</script>
请求完成后列表的展示