分页查询（前端分页显示）

最新推荐文章于 2024-08-16 15:07:38 发布

Less666666

最新推荐文章于 2024-08-16 15:07:38 发布

阅读量1.8k

点赞数 4

分类专栏： JDBC mysql 前端（html、css、js、jquery）

本文链接：https://blog.csdn.net/apple_51491580/article/details/115644842

版权

前端（html、css、js、jquery）同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

JDBC

3 篇文章 0 订阅

订阅专栏

mysql

2 篇文章 0 订阅

订阅专栏

1.效果

在这里插入图片描述

2.代码及解释

1.引入链接

<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.css" rel="stylesheet">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/locale/bootstrap-table-zh-CN.min.js"></script>

2.前端代码及解释

<body>
	<table id="mytable2"></table>
	<script>
		$(function(){
			$("#mytable2").bootstrapTable({
				//请求地址，请求后端数据
				url:"/courier/list.do",
				striped:false,
				//设置首页页码
				pageNumber:1,
				//	设置为 true 会在表格底部显示分页条
				pagination:true,
				//设置在哪里进行分页，可选值为 'client' 或者 'server'。设置 'server'时，必须设置服务器数据地址（url）或者重写ajax方法
				sidePagination:"server",
				//一页显示多少行数据
				pageSize:5,
				//如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
				pageList:[5,10,20],
				//是否显示刷新按钮
				showRefresh:true,
				//请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，如下方法传递页码和一页的数据行数
				queryParams:function(params){
					var temp = {
						offset:params.offset,
						pageNumber:params.limit
					};
					//将参数返回给后端
					return temp;
				},
				//列的参数
				columns:[
					{
						//前端显示的列头
						title:"编号",
						//后端传递过来的属性
						field:"id",
						//是否(true/false)允许列进行排序，会在列头上显示一个小三角
						sortable:false
					},
					{
						title:"姓名",
						field:"name",
						sortable:false
					},
					{
						title:"手机号码",
						field:"Phone",
						sortable:false
					},
					{
						title:"身份证号",
						field:"ID_Number",
						sortable:false
					},
					{
						title:"密码",
						field:"password",
						sortable:false
					},
					{
						title:"送件数",
						field:"send_number",
						sortable:false
					},
					{
						title:"注册时间",
						field:"register_time",
						sortable:false
					},
					{
						title:"上次登录",
						field:"login_time",
						sortable:false
					},
				]
			});
		});
	</script>
	</body>

3.后端代码

3.1mysql查询语句

private static final String FIND_ALL = "select * from courier limit ?,?";

3.2jdbc连接数据库（druid）

    //这里limit默认给了个true，就是使用分页查询
    public List<Courier> findall(boolean limit, int offset, int pageNumber) {
        List<Courier> list = new ArrayList<>();
        Connection connection =null;
        PreparedStatement preparedStatement =null;
        ResultSet resultSet =null;
        try {
            connection = DruidUtil.getConnection();
            preparedStatement = connection.prepareStatement(FIND_ALL);
            preparedStatement.setInt(1,offset);
            preparedStatement.setInt(2,pageNumber);
            resultSet = preparedStatement.executeQuery();
            while(resultSet.next()){
                Courier courier = new Courier();
                courier.setId(resultSet.getInt("id"));
                courier.setName(resultSet.getString("name"));
                courier.setPhone(resultSet.getString("Phone"));
                courier.setID_Number(resultSet.getString("ID_Number"));
                courier.setPassword(resultSet.getString("password"));
                courier.setRegister_time(resultSet.getTimestamp("Register_time"));
                courier.setSend_number(resultSet.getString("send_number"));
                courier.setLogin_time(resultSet.getTimestamp("login_time"));
                list.add(courier);
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        } finally {
            close(connection,preparedStatement,resultSet);
        }
        return list;
    }

3.3service层（降低耦合度）

public List<Courier> findAll(boolean limit, int offset, int pageNumber) {
        return courierDao.findall(limit,offset,pageNumber);
    }

3.4controller层与前端交互

@ResponseBody("/courier/list.do")
    public String list(HttpServletRequest req, HttpServletResponse resp){
        CourierServiceImpl courierService = new CourierServiceImpl();
        //接收前端传来的offset
        int offset = Integer.parseInt(req.getParameter("offset"));
        //接受pageNumber
        int pageNumber = Integer.parseInt(req.getParameter("pageNumber"));
        //接收查询结果
        List<Courier> list = courierService.findAll(true,offset,pageNumber);
        //这里单独对数据进行了转换，便于向前端展示（例如时间可能是不便查看）
        List<LastCourier> list2 = new ArrayList<>();
        for (Courier c:list) {
            String register_time = String.valueOf(c.getRegister_time());
            String login_time = String.valueOf(c.getLogin_time());
            LastCourier lastCourier = new LastCourier();
            lastCourier.setId(c.getId());
            lastCourier.setName(c.getName());
            lastCourier.setPhone(c.getPhone());
            lastCourier.setID_Number(c.getID_Number());
            lastCourier.setPassword(c.getPassword());
            lastCourier.setSend_number(c.getSend_number());
            lastCourier.setRegister_time(register_time);
            lastCourier.setLogin_time(login_time);
            list2.add(lastCourier);
        }
        //我这里有但单独的方法获取总数，获取总数可以写一个sql查询语句，查询总数
        ExpressServiceImpl expressService = new ExpressServiceImpl();
        List<Map<String,Integer>> console = expressService.console();
        /**
         * 总数
         */
        Integer total = console.get(2).get("data_size");
        /**
         * 下面代码是将数据转换成bootstrapTable识别的形式（主要是总数，和数据存入数组，在数组里边一个值是一行的数据）
         */
        ResultData<LastCourier> resultData = new ResultData<>();
        resultData.setTotal(total);
        resultData.setRows(list2);
        //转换成json传递给前端
        String json = JSONUtil.toJSON(resultData);
        return json;
    }

3.5bootstrapTable识别的形式类的编写

public class ResultData<T> {
    private int total;
    private List rows;

    public int getTotal() {
        return total;
    }

    public void setTotal(int total) {
        this.total = total;
    }

    public List getRows() {
        return rows;
    }

    public void setRows(List rows) {
        this.rows = rows;
    }
}