基于layui实现了将查询出的数据分页显示

今天基于layui实现了将查询出的数据进行分页显示,具体效果图:

 

话不多说,直接上代码:

jsp文件:

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="lib/layui/css/layui.css" media="all">
<!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
</head>
<body>

<table class="layui-hide" id="test"></table>


<script src="lib/layui/layui.js" charset="utf-8"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->

<script>
layui.use('table', function(){
var table = layui.table;

table.render({

elem: '#test'
,method:"post"
,cache:false
,url:'CourseServlet?method=fenye'
//数据总数,从服务端得到 发送数据用where
//示例:,where{"a":b}
,cols: [[
{field:'id', 80, title: 'ID', sort: true}
,{field:'username', 80, title: '用户名'}
,{field:'sex', 80, title: '性别', sort: true}
,{field:'city', 80, title: '城市'}
,{field:'sign', title: '签名', minWidth: 150}
,{field:'experience', 80, title: '积分', sort: true}
,{field:'score', 80, title: '评分', sort: true}
,{field:'classify', 80, title: '职业'}
,{field:'wealth', 135, title: '财富', sort: true}
]]
,page: true
});
});
</script>

</body>
</html>

servlet.java:()

package com.hjf.servlet;

import java.io.IOException;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;
import com.hjf.dao.CourseDao;
import com.hjf.entity.Course;
import com.hjf.entity.Course1;
import com.hjf.entity.Users;
import com.hjf.entity.fenye;
import com.hjf.service.CourseService;

@WebServlet("/CourseServlet")

public class CourseServlet extends HttpServlet { private static final long serialVersionUID = 1L; CourseService service = new CourseService(); CourseDao cDao = new CourseDao();

protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("utf-8");   String method = req.getParameter("method");   if ("xxx".equals(method)) {   xxx(req, resp);   } else if ("fenye".equals(method)) {   fenye(req,resp);   } }
protected void fenye(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        String page =req.getParameter("page");
        String limit =req.getParameter("limit");
//        System.out.println(a+b);
        Users r = new Users();
        r.setCode(0);
        r.setMsg("获得数据成功");
        //所有的数据数目,并不是单单一页展示的数目
        r.setCount(cDao.searchcount());
       
        //加载处理  可有可无,并不影响
        CourseDao cDao = new CourseDao();       
        List<fenye> list = cDao.chartLook1(page, limit);
        //传递的数据集
        r.setData(list);
        Gson gson = new Gson();
        String json = gson.toJson(r);
        System.out.println(json);
        resp.getWriter().write(json);
    }

 


}

  

实体类:

Users.java:

package com.hjf.entity; public class Users { /**响应编码*/ private int code; /**响应消息*/ private String msg; /**数据总量*/ private int count; /**数据*/ private Object data; public Users() { } public Users(int code, String msg, int count, Object data) { super(); this.code = code; this.msg = msg; this.count = count; this.data = data; } @Override public String toString() { return "R [code=" + code + ", msg=" + msg + ", count=" + count + ", data=" + data + "]"; } public int getCode() { return code; } public void setCode(int code) { this.code = code; } public String getMsg() { return msg; } public void setMsg(String msg) { this.msg = msg; } public int getCount() { return count; } public void setCount(int count) { this.count = count; } public Object getData() { return data; } public void setData(Object data) { this.data = data; } }

fenye.java:

package com.hjf.entity;

public class fenye {

private int id;

private String username;

private String sex;

private String city;

private String sign;

private String experience;

private String score;

private String classify;

private String wealth;

public int getId() {

return id;

}

public void setId(int id) {

this.id = id;

}

public String getUsername() {

return username;

}

public void setUsername(String username) {

this.username = username;

}

public String getSex() {

return sex;

}

public void setSex(String sex) {

this.sex = sex;

}

public String getCity() {

return city;

}

public void setCity(String city) {

this.city = city;

}

public String getSign() {

return sign;

}

public void setSign(String sign) {

this.sign = sign;

}

public String getExperience() {

return experience;

}

public void setExperience(String experience) {

this.experience = experience;

}

public String getScore() {

return score;

}

public void setScore(String score) {

this.score = score;

}

public String getClassify() {

return classify;

}

public void setClassify(String classify) {

this.classify = classify;

}

public String getWealth() {

return wealth;

}

public void setWealth(String wealth) {

this.wealth = wealth;

}

public fenye(int id,String username,String sex,String city,String sign,String experience,String score,String classify,String wealth) {

this.id = id;

this.username = username;

this.sex = sex;

this.city = city;

this.sign = sign;

this.experience = experience;

this.score = score;

this.classify = classify;

this.wealth = wealth;

}

}

CourseDao.java

package com.hjf.dao;

import java.sql.Connection;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.sql.Statement;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import com.hjf.entity.Course;

import com.hjf.entity.Course1;

import com.hjf.entity.Users;

import com.hjf.entity.fenye;

import com.hjf.util.DBUtil;

/**

 * 课程Dao

 * Dao层操作数据

 * @author Hu

 *

 */

public class CourseDao {

CourseDao dao;

     public List<fenye> chartLook1(String page,String limit){

        String sql="select * from fenye";

        Connection connection= DBUtil.getConn();

        Statement statement=null;

        ResultSet resultSet=null;

        int Page = Integer.parseInt(page);

        int Limit = Integer.parseInt(limit);

        List<fenye> lis = new ArrayList<>();

        try {

            statement=connection.createStatement();

            resultSet=statement.executeQuery(sql);

            fenye bean = null;

            while(resultSet.next()){

                String username=resultSet.getString("username");

                int id = resultSet.getInt("id");

                String sex=resultSet.getString("sex");

                String city=resultSet.getString("city");

                String sign=resultSet.getString("sign");

                String experience=resultSet.getString("experience");

                String score=resultSet.getString("score");

                String classify=resultSet.getString("classify");

                String wealth=resultSet.getString("wealth");   

    bean = new fenye(id,username,sex,city,sign,experience,score,classify,wealth);

    lis.add(bean);

            }

        } catch (SQLException e) {

            e.printStackTrace();

        }

        DBUtil.close(resultSet,statement,connection);

        

        List<fenye> list = new ArrayList<>();

        int start=(Page-1)*Limit;//判断当前也开始的数据位置

        for (int i =start; i <start+Limit&&i<lis.size(); i++) {

            list.add(lis.get(i));

        }

        return list;

        

    }

}

数据库表就不放了,按照jsp界面的数据或者dao层数据建表即可

原文地址:https://www.cnblogs.com/zhangxinyue/p/13917406.html