SSM pageHelper + 前端 Bootstraptbale分页 + 解析嵌套的二级json数据

最新推荐文章于 2024-07-31 21:57:52 发布

炫绚宣

最新推荐文章于 2024-07-31 21:57:52 发布

阅读量2.5k

点赞数 3

本文链接：https://blog.youkuaiyun.com/qq_40124831/article/details/80136122

版权

本文介绍了如何在SSM项目中使用PageHelper进行后台分页，结合前端Bootstraptable展示数据。特别是面对嵌套的二级JSON数据时，通过在表格渲染前对JSON进行处理，以便正确显示grade对象的属性。详细内容包括jsp页面的代码结构，以及Controller、Service、DAO和Mapper的相关实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ssm 后台使用pageHelper 分页插件前端使用Bootstraptable 插件

废话不多说先上图

为了大家能更快的掌握 ,我不加其他花哨的内容 bootstrapboot 里的属性我就设置了常用几个

下面是jsp页面的代码一共要引入5个文件注意引入js的先后顺序 jquery 在前

bootstrap.min.css

bootstrap-table.css

jquery-3.2.1.min.js 我用的是3.2.1

bootstrap.min.js

bootstrap-table.js

bootstrap-table-zh-CN.js 支持中文的

jsp 页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<!--引入 bootstrap.min.css-->
<link rel="stylesheet" href="${pageContext.request.contextPath }/statics/css/bootstrap.min.css" />

<!--引入bootstrap-table.css-->
<link rel="stylesheet" href="${pageContext.request.contextPath }/statics/css/bootstrap-table.css" />

<!--引入jquery-->
<script type="text/javascript" src="${pageContext.request.contextPath }/statics/js/jquery-3.2.1.min.js"></script>

<!--引入bootstrap.min.js -->
<script type="text/javascript" src="${pageContext.request.contextPath }/statics/js/bootstrap.min.js"></script>

<!--引入bootstrap-table.js -->
<script type="text/javascript" src="${pageContext.request.contextPath }/statics/js/bootstrap-table.js"></script>

<!--引入bootstrap-table-zh-CN.js-->
<script type="text/javascript" src="${pageContext.request.contextPath }/statics/js/bootstrap-table-zh-CN.js"></script>

</head>

<body>
	<div class="panel panel-default">
		<div class="panel-body"><h2>学生信息表</h2></div>
	</div>
	<!-- table 标签 -->
	<table></table>
</body>
</html>


<script type="text/javascript">
	//项目根路径
	var path = '${pageContext.request.contextPath}';
	$('table').bootstrapTable({
		method : 'post',                                   // 向服务器请求方式
		contentType : "application/x-www-form-urlencoded", // 如果是post必须定义
		url : path + '/getData',                           //请求后台的URL（*）
		pageSize : 2,                                      // 每页的记录行数（*）
		pageNumber : 1,                                    // table初始化时显示的页数
		pageList : [ 2, 5, 10 ],                           //可供选择的每页的行数（*）
		sidePagination : "server",                         //分页方式：client客户端分页，server服务端分页（*）  bootstrap-table要求服务器返回的json须包含：total rows
		cache : false,                                     // 是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
		striped : true,                                    // 隔行变色
		pagination : true,                                 // 是否启用分页
		showR