js组件-bootstrap table 客户端分页与搜索总结
程序员文章站
2022-07-15 10:46:20
...
先上代码以及效果图
ｈｔｍｌ代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%
pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${APP_PATH}/js/bootstrap-dialog.min.js"></script>
<link href="${APP_PATH}/plugin/layui/css/layui.css" rel="stylesheet" />
<script type="text/javascript" src="${APP_PATH}/js/bootstrap-pagy.min.js"></script>
<link type="text/css" rel="stylesheet" href="${APP_PATH}/css/commone.css" />
<script type="text/javascript" src="${APP_PATH}/js/teacherList.js"></script>
<!-- 必须引入 -->
<script type="text/javascript" src="${APP_PATH}/js/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="${APP_PATH}/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="${APP_PATH}/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="${APP_PATH}/css/bootstrap-table.css" />
<script type="text/javascript" src="${APP_PATH}/js/bootstrap-table.js"></script>
<script type="text/javascript" src="${APP_PATH}/js/bootstrap-table-zh-CN.js"></script>
</head>
<body>
<div>
<table id="TeacherInfoTable">
</table>
</div>
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="btn_edit" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button id="btn_delete" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
</div>
</body>
</html>其中后面６个是必须要引入的
Bootstrap中文网：http://www.bootcss.com/
Bootstrap Table Demo：http://issues.wenzhixin.net.cn/bootstrap-table/index.html
Bootstrap Table API：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
Bootstrap Table源码：https://github.com/wenzhixin/bootstrap-table
Bootstrap DataPicker：http://www.bootcss.com/p/bootstrap-datetimepicker/
Boostrap Table 扩展API：http://bootstrap-table.wenzhixin.net.cn/extensions/
给出下载地址js代码
$(function(){
$('#TeacherInfoTable').bootstrapTable({
url : 'teacher/getAllList', // 请求后台的URL（*）
method : 'get', // 请求方式（*）
toolbar : '#toolbar', // 工具按钮用哪个容器
striped : true, // 是否显示行间隔色
cache : false, // 是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
// sortable : true, //用 是否启排序
// sortOrder : "asc", // 排序方式
sidePagination : "client", // 分页方式：client客户端分页，server服务端分页（*）
pagination : true, // 是否显示分页（*）
pageNumber: 1, //如果设置了分页，首页页码
pageSize: 4, //每页的记录行数（*）
pageList: [4,5,6], //可供选择的每页的行数（*）
// onlyInfoPagination:false, //设置为 true 只显示总数据数，而不显示分页
showRefresh : true, // 是否显示刷新按钮
// queryParamsType:'',
clickToSelect : true, // 是否启用点击选中行
// uniqueId : "fileid", // 每一行的唯一标识，一般为主键列
showToggle : false, // 是否显示详细视图和列表视图的切换按钮
// cardView : false, // 是否显示详细视图
// detailView : false, // 是否显示父子表
search:true, //是否启用搜索框
columns : [ {
field : 'tUsername',
title : '教师号',
align: 'center',
valign: 'middle'
},{
field : 'tName',
title : '姓名',
align: 'center',
valign: 'middle'
}, {
field : 'tAge',
title : '年龄',
align: 'center',
valign: 'middle'
}, {
field : 'tDepartment',
title : '所属学院',
align: 'center',
valign: 'middle'
} ],
silent : true, // 刷新事件必须设置
});
})
Controller层代码
@RequestMapping("/getAllList")
@ResponseBody
public List<Teacher> getTeacherAll()
{
return teacherService.getTeacherList();
} 数据返回示例
总结：
客户端分页 将分页方式定为ｃｌｉｅｎｔ 一次性从后台请求所有数据 由前台进行分页以及搜索功能，而不必再次请求服务器端
优点：方便 简单
缺点：当数据过多时会对性能造成影响
后面一篇会介绍服务器端的分页以及搜索
上一篇： 异常 exception
下一篇： git 版本回退