引言
bootstrap-table的好处就是在于,可以借用封装好的框架,来实现自己的需求.利用其对表的封装,我们可以很轻松画出美观大方法的表格.本篇,作为表的分页查询,来系统介绍总结一下.
这里提出分页需求:用户可以根据需要调整每页的显示条数和查看每页的记录数.
实现方法
利用bootstrap-table插件,对其进行基础配置,展示出分页表头.
代码
下面直接上代码.
前台代码:
页面引入文件:
<!-- jQuery-->
<script src="../resources/jquery/juqery-1.12.4.min.js" th:src="@{/resources/jquery/juqery-1.12.4.min.js}" type='text/Javascript"></script>
<!-- bootstrap-->
<link href="../resources/bootstrap/bootstrap.min.css" th:href="@{/resources/bootstrap/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
<script src="../resources/bootstrap/bootstrap.min.js" th:href="@{/resources/bootstrap/bootstrap.min.js}" type="text/javascript"></script>
<!-- bootstrap-table-->
<link href="../resources/bootstrap/bootstrap-table/bootstrap-table.min.css" th:href="@{/resources/bootstrap/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet" type="text/css"/>
<script src="../resources/bootstrap/bootstrap-table/bootstrap-table.min.js" th:src="@{resources/bootstrap/bootstrap-table/bootstrap-table.min.js}" type="text/javascript"></script>
<script src="../resources/bootstrap/bootstrap-table/bootstrap-table-zh-CN.min.js" th:src="@{/resources/bootstrap/bootstrap-table/bootstrap-table-zh-CN.min.js" type="text/javascript"></script>
页面代码:
//工具栏
<div>
<label for="NAME">名称</label>
<div><input type="text" id="NAME"/></div>
</div>
<div>
<div><a href="javascript:void()" class="btn btn-primary" id="search">查询</a></div>
</div
<div>
<table class="table" id="demo"></table>
<div>
页面bootstrap-table画表过程:
<script th:inline="JavaScript" type="text/JavaScript">
//页面初始化完成后立即加载
$(function(){
//初始化table
var oTable = new TableInit();
oTable.Init();
//查询
$("#search").click(function(){
$("#demo").bootstrapTable('destory');
var table = new TableInit();
table.Init();
});
});
var TableInit = function(){
var oTableInit = new Object();
var url = [[@{/action/test}]];
//初始化Table
oTableInit.Init = function(){
$("#demo").bootstrapTable({
url: url,
method: 'post',
striped: true,//隔行显色
cache: false,
contentType: "application/x-www-form-urlenceded; charset=UTF-8",
sortable: false,//是否启用排序
queryParamsType: "undefined",
queryParams:oTableInit.queryParams,
responseHandler: function(res){
return res.result;
},
pagination:true,//是否显示分页
paginationVAlign:"top",//设置分页条位置
paginationDetailHAlign:"right",
paginationHAlign:"right",
pageNumber:,//初始化加载第一页,默认第一页
pageSize:20,//默认每页显示条数
pageList: [10, 20, 50],
sidePagination: "server",
minimumCountColumns: 2,//最少允许的列数
clickToSelect: true,//启用点击选中行
uniqueId: "ID",
checkboxHeader: true,
showExport: false,
columns: [{
field: "ID",
title: '项目id',
align: "center"
}, {
field: 'NAME',
title: '名称',
align: "center"
},{
field: 'INPUT_DATE',
title: '创建日期',
align: "center"
},{
title: '操作',
field: 'Id11',
align: "center",
formatter: formatOperat
}]
});
$('#demo').bootstrapTable('hideColumn', 'ID');
function formatOperat(value,row,index){
return ['<a id="viewBtn" onclick="view(\''+row.ID+'\')">查看</a> <a id="delBtn" onclick="del(\''+row.ID+'\')">删除</a>'].join('');
}
};
//得到查询的参数
oTableInit.queryParams = function(params) {
if(!params.limit) {
params.limit = params.pageSize;
}
if(!params.offset) {
params.offset = params.pageNumber;
}
var temp = {
page_number: params.offset, //页面大小
line: params.limit, //页码
ID: $("#ID").val(),
NAME:$("#NAME").val(),
INPUT_DATE: $("#INPUT_DATE").val()
};
return temp;
};
return oTableInit;
};
function view(id){
......
}
function del(id){
......
}
</script>
后台:
Controller层:
@Validated
@Controller
@RequestMapping("/action/")
public class DemoController {
@Autowired
private DemoService demoService;
@RequestMapping(value="/test", method = RequestMethod.POST)
@ResponseBody
public Map<String, Object> getData(String NAME,String page_number,String line){
Map<String,Object> map = new HashMap<String,Object>();
map.put("NAME",NAME);
map.put("page_number",page_number);
map.put("line",line);
List> returnList = service.getData(paramsMap);
return ParamUtils.returnData("1", ReturnTyme.success, "", ParamUtils.converData(returnList));
}
....
}
service层
public List<Map<String,Object>> getData(Map<String,Object> paramsMap) {
return dao.getData(paramsMap);
}
Dao层
public List> getData(Map paramsMap) {
PageHelper.startPage(Integer.parseInt(paramsMap.get("page_number").toString()),
Integer.parseInt(paramsMap.get("line").toString()));
return sqlSession.selectList("demo.getData", paramsMap);
}
xml文件
<select id="demo.getData" parameterType="java.util.HashMap" resultType="java.util.HashMap">
SELECT
ID,
NAME,
INPUT_DATE,
FROM
demo.test
WHERE 1=1
<if test="NAME!=null and NAME!=''">
and NAME = #{NAME}
</if>
<select>
效果图:
