Boostrap_table后端分页实现

最新推荐文章于 2023-08-17 10:50:26 发布

面向对象，春暖花开

最新推荐文章于 2023-08-17 10:50:26 发布

阅读量155

点赞数

分类专栏： Bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/select_zxl/article/details/128399730

版权

Bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Bootstrap_table下载地址：

https://www.bootstrap-table.com.cn/doc/getting-started/download/

前端

bootstrap.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">

<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<link rel="stylesheet" th:href="@{/bootstrap/dist/css/bootstrap.min.css}">
	<link rel="stylesheet" th:href="@{/bootstrap/table/dist/bootstrap-table.min.css}">

	<script th:src="@{/js/jquery.min.js}"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
		integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
		crossorigin="anonymous"></script>
	<script th:src="@{/bootstrap/dist/js/bootstrap.min.js}"></script>
	<script th:src="@{/bootstrap/table/dist/bootstrap-table.min.js}"></script>
<!--	语言环境-->
	<script th:src="@{/bootstrap/table/dist/locale/bootstrap-table-zh-CN.min.js}"></script>
</head>

<body>
	
	<div style="width: 2000px;">
		<table id="table"></table>
	</div>

	<script type="text/javascript" th:inline="javascript">

		$('#table').bootstrapTable({
			url: '/json',
			method: 'get',						//请求方式
			dataType: "json",					//服务器返回的数据类型。
			cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
			pagination: true,                   //是否显示分页（*）
			sortable: true,                     //是否启用排序
			sortOrder: "asc",                   //排序方式
			sortName: "id",						//排序字段
			sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
			pageNumber: 2,                      //初始化加载第一页，默认第一页
			pageSize: 2,                        //每页的记录行数（*）
			pageList: [2],        				//可供选择的每页的行数（*）
			queryParams: queryParams,			//请求的参数
			clickToSelect: true,                //是否启用点击选中行
			idField: 'id',						//一行数据的id值				
			//事件
			onClickRow: function (row, $element, field) {	//点击一行时触发
				//方法
				$('#table').bootstrapTable('remove', {"field": "id", "values": "3"}) //删除一行
			},
			formatLoadingMessage: function () {
				return `<div class="alert alert-info">数据正在拼命加载中···</div>`;
			},
			columns: [{
				field: 'username',
				title: 'Item Name'
			}, {
				field: 'password',
				title: 'Item Price'
			}]
		})

		//请求的参数
		function queryParams(params) {
			return {
				"limit": params.limit,
				"offset": params.offset,
				"sort": params.sort,
				"order": params.order,
				"username": "name",
				"id": "id",
				"password": "pwd"
			};
		}

	</script>



</body>

</html>

后端

分页参数

public class PageParams {

	/**
	 * 一页多少条
	 */
	private Integer limit;
	/**
	 * 从多少条开始拿
	 */
	private Integer offset;
	/**
	 * 检索条件
	 */
	private String search;
	/**
	 * 排序字段名称
	 */
	private String sort;
	/**
	 * 排序方式：  desc asc
	 */
	private String order;

}

User对象

public class User extends PageParams {

	private String id;
	private String username;
	private String password;

}

数据返回对象

public class PageHelper<T> {
	
	/**
	 * 	一夜数据 必须使用这个名称(rows)
	 */
	private List<T> rows;
	/**
	 * 总条数 必须使用这个名称(total)
	 */
	private Long total;

}

Controller

@Controller
public class BootstrapController {

	@GetMapping("/bootstrap")
	public String bootstrap() {
		return "/bootstrap";

	}
	@ResponseBody
	@GetMapping("/json")
	public String tableJson(User user) throws InterruptedException {
		
		PageHelper<User> page = new PageHelper<User>();
		
		List<User> list = new LinkedList<>();
		list.add(new User("1", "aaa", "111"));
		list.add(new User("2", "bbb", "111"));
		list.add(new User("3", "abbaa", "111"));
		page.setRows(list);
		page.setTotal(1000L);

		return JSON.toJSONString(page);

	}
}