最初にコードとレンダリングについて
htmlコード
<%@ 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>
それらの最後の6つを導入する必要があります
ブートストラップ中国のウェブサイト:http://www.bootcss.com/
ブートストラップテーブルのデモ:http://issues.wenzhixin.net.cn/bootstrap-table/index.html
ブートストラップテーブルAPI:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
ブートストラップテーブルのソースコード: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, // 刷新事件必须设置
});
})
コントローラーレイヤーコード
@RequestMapping("/getAllList")
@ResponseBody
public List<Teacher> getTeacherAll()
{
return teacherService.getTeacherList();
}
データ戻りの例
総括する:
クライアント側のページングは、ページングモードをクライアントとして設定します。すべてのデータはバックグラウンドから一度に要求され、フロントエンドはサーバーを再度要求することなくページングおよび検索機能を実行します。
利点:便利でシンプル
短所:データが多すぎるとパフォーマンスが影響を受けます
次の記事では、サーバー側のページングと検索について紹介します