bootstrap-table 分页_bootstraptable 分页字体设置-优快云博客

本文链接：https://blog.youkuaiyun.com/sunyanchun/article/details/78044678

本文介绍如何利用Bootstrap Table插件实现前后端分离的数据表格展示，并通过示例代码详细展示了页面布局、JavaScript交互逻辑及后台Controller处理逻辑。

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

页面：

1、页面代码jsp：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>content</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-table.min.css">
	<script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap-table.min.js"></script>
 	<script type="text/javascript" src="bootstrap/js/bootstrap-table-zh-CN.min.js"></script>
 	<script type="text/javascript">
 		$(function() {
			$('#tab').bootstrapTable({
				url:"listContent",//要请求数据的文件路径
			    method: 'post',
			    contentType: "application/x-www-form-urlencoded",
			    height: $(window).height() - 200,
	            locale:'zh-CN',//中文支持
			    queryParams:queryParams,//请求服务器时所传的参数
			    sidePagination:'server',//指定服务器端分页
			    pagination: true,//是否开启分页（*）
	            pageNumber:1,//初始化加载第一页，默认第一页
	            pageSize:3,//单页记录数
			    pageList:[1,3,5],//分页步进值
			    columns:[
			        {
			            title:'标题',
			            field:'title'
			        },
			        {
			            title:'作者',
			            field:'author'
			        },
			        {
			            title:'时间',
			            field:'createTime',
			            sortable:true
			        }
			    ]
			});
		});
		//请求服务数据时所传参数
		function queryParams(params){
		    return{		        
		        page:params.offset/params.limit+1,//第几页		      	
		        rows: params.limit,//每页多少条
		        title:$('#title').val()
		    }
		}
		//搜索
		function search(){
			$('#tab').bootstrapTable('refresh', {url: 'listContent',pageNumber:1,pageSize:3});
		}
 	</script>
  </head>
  
  <body> 
  	<div class="form-inline" style="text-align:right; margin-top:15px;">
  		<div class="form-group">
            <span>标题：</span>
            <input id="title" class="form-control">
        </div>
        <button class="btn btn-default" onclick="search()">搜索</button>
    </div>
    <br/>
	<table id="tab" class="table table-hover"></table>
  </body>
</html>

2、后台代码Controller：

	/**  
	 * 查询信息列表  
     * @method: listContent() -by fjt  
     * @TODO:    
     * @param page  
     * @param rows  
     * @param title  
     * @param res  
     * @throws Exception void  
     */  
    @RequestMapping("listContent")  
    public void listContent(Integer page,Integer rows,String title,HttpServletResponse res) throws Exception{  
        res.setContentType("text/html;charset=utf-8");  
        List<Content> cList = new ArrayList<Content>();  
        Integer count = contentService.count(title);  
        if (count > 0) {  
            cList = contentService.list(title, page, rows);  
        }  
        JSONObject jsonObject = new JSONObject();  
        jsonObject.accumulate("total", count);  
        jsonObject.accumulate("rows", cList);         
        PrintWriter out=res.getWriter();  
        out.println(jsonObject);  
        out.flush();  
        out.close();  
    }