Bootstrap table 后台分页(Java)

最新推荐文章于 2023-02-22 14:00:45 发布

原创最新推荐文章于 2023-02-22 14:00:45 发布 · 503 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap table后台分页 #bootstrap table # table 后台分页

Java 同时被 2 个专栏收录

27 篇文章

订阅专栏

JS/JavaScript/Bootstrap

9 篇文章

订阅专栏

本文详细介绍如何在网页中利用Bootstrap Table插件实现数据分页功能。从引入必要的JS和CSS文件开始，到具体JS代码配置，包括设置分页、搜索、列筛选等功能，最后通过后端代码配合，完成动态数据加载和渲染。

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

1、引入JS/CSS

<!-- css -->
<link rel="stylesheet" th:href="@{/static/assets/css/bootstrap.css}">
<link rel="stylesheet" th:href="@{/static/components/bootstrap-table/bootstrap-table.css}">
<link rel="stylesheet" th:href="@{/static/components/bootstrap-table/bootstrap-table-pagejump.css}">

<!-- js -->
<script th:src="@{/static/components/jquery/jquery.min.js}"></script>
<script th:src="@{/static/assets/js/bootstrap.min.js}"></script>
<script th:src="@{/static/components/bootstrap-table/bootstrap-table.min.js}"></script>
<script th:src="@{/static/components/bootstrap-table/bootstrap-table-pagejump.js}"></script>
<script th:src="@{/static/components/bootstrap-table/bootstrap-table-zh-CN.js}"></script>

2、JS代码

    $('#table').bootstrapTable('destroy'); 
    $('#table').bootstrapTable({
		method : 'get',
		contentType : 'application/x-www-form-urlencoded',	//get方法使用默认的application/json
		url : '',
		queryParams : queryParams,
		dataType: 'json',			// 返回数据类型
		locale: 'zh-CN',			// 中文支持
		showRefresh: false,			// 刷新按钮
		showColumns: false,			// 显示列筛选
		sidePagination: 'server',	// 设置在哪里进行分页，可选值为 'client' 或者 'server'
//		uniqueId : 'id', 			// 绑定ID，对每一行指定唯一标识符
		cache : false, 				// 设置为 false，禁用 AJAX 数据缓存， 默认为true
		striped : false, 			// 表格显示条纹，默认为false
		pagination : true, 			// 在表格底部显示分页组件，默认false
		paginationLoop : true,		// 默认true，启用分页条无限循环的功能
//		paginationShowPageGo: true, // 分页跳转
		pageList : [10, 20, 50 ],	// 设置页面可以显示的数据条数
		pageSize : 10, 				// 页面默认数据条数
		pageNumber : 1, 			// 首页页码
		paginationPreText : '上一页',	// 分页条中上一页按钮的图标或文字
		paginationNextText : '下一页',	// 分页条中下一页按钮的图标或文字
		search : false,				// 启动搜索框
		searchOnEnterKey : false,	// 默认false，输入自动搜索
		showHeader : true,			// 默认true
		showFooter : false,			// 默认false
		clickToSelect: false,		// 为true时点击行选中复选框
		toolbar : '#buttonGroup', 	
		responseHandler: responseHandler, // 请求成功后,渲染表格
		columns : [
			 {checkbox : true, align: 'center', valign: 'middle'},
			 {field: '', align: 'center', valign: 'middle', title: ''},
			 {field: '', align: 'center', valign: 'middle', title: ''},
			 {field: '', align: 'center', valign: 'middle', title: ''},
			 {field: '', align: 'center', valign: 'middle', title: ''},
		],
		onLoadSuccess:function(data){
//			console.log(data);
		}
    
    })


/**
 * 查询、分页的参数
 * @param params
 * @returns
 */
function queryParams(params){
	var par = {
	    pageSize  : params.limit, //每一页的数据行数，默认是上面设置的10(pageSize)
	    pageIndex : params.offset / params.limit+1, //当前页面,默认是上面设置的
            // 可自行添加参数
	}
	return par;
}

/**
 * 请求之后渲染表格
 * @param result
 * @returns
 */
function responseHandler(result) {
    var temp = {
        // 下面这两个参数是必须有的, 名称不能变
        // 总的数量
        total : result.total,
        // 数据
        rows : result.rows
    };
    return temp;
}

3、后台代码

public Page<?> listDeviceAdvert(Integer pageIndex, Integer pageSize) {
    
}

// 上面的Page<?>是封装的了，js  responseHandler方法里面有rows和total都封装在里面