Java servlet 结合Bootstrap-table 展示表格数据

近期做数据库课设,用到的一个前端展示Table的工具——bootstrap-table,在这里记录一下其用法

概述

Bootstrap-Table是一个Boostrap的表格插件,能够将JSON数据直接显示在表格中。官方网址。里面可以下载使用所需的JS和CSS文件,以及参考文档和例子。

Bootstrap-Table显示数据到表格的方式有两种,一种是客户端(client)模式,一种是服务器(server)模式。

所谓客户端模式,指的是在服务器中把要显示到表格的数据一次性加载出来,然后转换成JSON格式传到要显示的界面中,在JavaWeb中可以保存在request中,然后转发到指定界面,在界面初始化的时候使用EL表达式获取,然后调用相关初始化的函数,将JSON字符串传进去即可显示。客户端模式较为简单,它是把数据一次性加载出来放到界面上,然后根据你设置的每页记录数,自动生成分页。当点击第二页时,会自动加载出数据,不会再向服务器发送请求。同时用户可以使用其自带的搜索功能,可以实现全数据搜索。对于数据量较少的时候,可以使用这个方法。但是对于数据量大的系统,使用该方法会造成加载出一些很久之前的,用户不在关注的数据,使得加载速度变慢,增加了服务器的负担,浪费了资源。这时应该采用服务器模式。

所谓服务器模式,指的是根据设定的每页记录数和当前要显示的页码,发送数据到服务器进行查询,然后再显示到表格中。该方法可以根据用户的需要动态的加载数据,节省了服务器的资源,但是不能使用其自带的全数据搜索功能。因为你加载的数据只是一页的数据,所以全数据搜索的范围也只在一页之中。

这篇文章就以客户端模式为例,服务器模式在客户端模式的基础要多做一个后端分页的处理。

最终做到效果如下:
![enter description here][1]

前端

HTML文件中引入相关的JS和CSS,定义一个表格标签,配置相关的boostrap-table属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<title>课程</title>
<meta charset="utf-8">
<link href="css/styleCourse.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/stylelittle.css" rel="stylesheet">



<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-table.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet">

<script type="text/javascript" src="css/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="css/bootstrap.min.js"></script>
<script type="text/javascript" src="css/jquery.validate.js" ></script>
<script type="text/javascript" src="css/bootstrap-table.js"></script>

</head>
<body>

<h1 style=" line-height:6em;"> </h1><br />
<!--网页中间内容-->
<div id="panelBody">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>课程</strong></h3>
</div>
<div class="panel-body">

<!--
here 第一块
search
-->
<div id="searchArea">
<div class="row">
<div class="col-lg-4">
<div class="input-group">
<span class="input-group-addon">
Name
</span>
<input type="text" class="form-control" placeholder=".." aria-label="..">
</div>
</div>
<div class="col-lg-4">
<div class="input-group">
<span class="input-group-addon">
ID
</span>
<input type="text" class="form-control" placeholder="null means all" aria-label="...">
</div>
</div>
<div>
<span>
<button type="button" class="btn btn-default btn-outline">
<span class="searchText">
<i class="fa fa-search" id="searchBtn"> search</i>
</span>
</button>
</span>

</div>
</div>
</div>

<div class="tableShow" id="courseTable">
<table class="table-hover" id="productTable">

</table>
</div>
</div>
</div>
</div>

</body>
</html>

在js代码中,使用bootstarpTable对id为productTable的表格进行初始化,其中url参数为请求发送的地址,method为请求发送的方法,dataField为返回的json数据中table要展示的数据在是哪个key对应的value,columns为Table的栏位的定义,也对应的返回的json数据中的各个栏位。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
$('#productTable').bootstrapTable({
striped: false,
clickToSelect: true, //点击行就选中
silent: true,
showPaginationSwitch: false,
showToggle: false,
showColumns: true, //显示隐藏列
showRefresh: true, //显示刷新按钮
singleSelect: true, //复选框只能选择一条记录
url: '/course/list', //servlet地址
method: 'get',
dataField : "data",
queryParams: queryParams, //查询参数
locale:'zh-CN', //国际化
pagination: true, //开启分页
sidePagination: 'client', //服务端分页
pageSize: 10, //分页条数
pageList: [10,20,50,100,200],
search: true,
idField: 'ID',
columns:[
{field:'',title:'',checkbox:true}, //复选框
{field:'id',title:'课程ID',align : 'center'},
{field:'name',title:'课程名称',align : 'center'},
{field:'type',title:'类型',align : 'center'},
{field:'credit',title:'学分',align : 'center'},
{
title : '操作',
field : 'id',
align : 'center',
formatter : function(value, row, index) {
var e = '<a href="#" mce_href="#" onclick="edit(\''
+ row.id + '\',\''+row.name+'\')">编辑</a> ';
var d = '<a href="#" mce_href="#" onclick="del(\''
+ row.id + '\')">删除</a> ';
var f = '<a href=/course/detail?course_id='+row.id+'>详情</a>';
return e + d + f;
}

}
]
});


function queryParams(params) {
return {
NAME:params.search, //开启自带查询后输入的值
ISDEL:0,
pageSize: params.limit, //分页条数
pageNumber: params.pageNumber //当前页数
};
} //在这里你可以自己定义查询的参数

json 数据实例:

1
2
3
4
5
6
7
8
9
10
11
{
"data":
[
{
"id":"XXXXXX",
"name": "语文",
"type": "必修",
"credit": 4.0
}
]
}

后端

后端要做的事情就是接受前端发来的请求,返回要展示的table数据就行了(按照相应的格式)

主要处理代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@WebServlet("/course/list")
public class GetCourselistServlet extends HttpServlet{

protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {

response.setCharacterEncoding("UTF-8");
response.setContentType("application/json; charset=utf-8");

CourseDaoImpl c = new CourseDaoImpl();
List<Course> res = c.getAllCourse();
String jsonStr = Obj2Json.Course2Json(res); // 将获得Course List数据转化为json格式

PrintWriter out = null;
try {
out = response.getWriter();
out.write(jsonStr);
} catch (IOException e) {
e.printStackTrace();
} finally {
if (out != null) {
out.close();
}
}

}

protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
doGet(request,response);
}
}

增删改

首先就是要在前端加两个输入表单的table:(这里只放修改的div代码,增加表单的代码类似)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">修改课程</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label>课程ID</label> <input type="text" class="form-control"
id="updateId">
</div>
<div class="form-group">
<label>课程名称</label> <input type="text" class="form-control"
id="updateName">
</div>
<div class="form-group">
<label>课程类型</label>
<select id="updateType" class="form-control">
<option value=0>必修</option>
<option value=1>选修</option>
</select>
</div>
<div class="form-group">
<label>学分</label> <input type="number" class="form-control"
id="updateCredit">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary" id="updateConfirmBtn">提交更改</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

然后就是JavaScript对增删改的处理了,这个应该是这个里面最关键的东西:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
// 单独删除按键
function del(id) {
if (confirm("是否删除?")) {
$.ajax({
url : "/course/delete",
method: "post",
data : {
"id" : id
},
success : function(data) {
alert("删除成功!");
//重新加载表格
$("#table").bootstrapTable("refresh");
}
});
} else {
}
}

//编辑按钮点击事件
var idGlobal = 0;
function edit(id,name) {
$("#updateModal").modal('show');
idGlobal = id;
//信息
$("#updateId").val(id);
$("#updateName").val(name);
$("#updateType").val(0);
$("#updateCredit").val("");
}

//编辑模态框下确认按钮的点击事件
$("#updateConfirmBtn").click(function() {
$("#updateModal").modal('hide');
$.ajax({
url : "/course/update",
method : 'post',
data : {
id : idGlobal,
name : $("#updateName").val(),
type: $("#updateType").val(),
credit: $("#updateCredit").val()
},
success : function() {
alert("修改成功!");
//重新加载表格
$("#table").bootstrapTable("refresh");
}
});
});

//添加按钮点击事件
$("#btn_save").click(function() {
//借用修改的模态框
$("#saveModal").modal('show');
//清楚输入框信息
$("#saveId").val("");
$("#saveName").val("");
$("#saveType").val(0);
$("#saveCredit").val("");
});

//添加用户模态框下的确认按钮点击事件
$("#saveConfirmBtn").click(function() {
$("#saveModal").modal('hide');
$.ajax({
url : "/course/add",
method : 'post',
datatype:'json',
data : {
id : $("#saveId").val(),
name : $("#saveName").val(),
type: $("#saveType").val(),
credit: $("#saveCredit").val()
},
success : function() {
alert("添加成功!");
//重新加载表格
$("#productTable").bootstrapTable("refresh");
}
});
});

后端代码就是常规的处理逻辑,根据get请求的参数实施对数据库的操作


参考1

[1]: https://data2.liuin.cn/story-writer/2018_1_19_1516292440320.jpg “效果”