zoukankan      html  css  js  c++  java
  • 基于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层数据建表即可

  • 相关阅读:
    SAP程序代码中RANGE表的用法注意点
    代码审计学习-1
    应用层隧道之HTTP/HTTPS和DNS
    应用层隧道技术之SSH
    横向移动-常用windows连接和相关命令
    基于MSF的路由转发
    渗透过程中的边界突破(内部分享笔记)
    网络层隧道之PowerCat
    网络层隧道之lcx和nc的使用
    网络层隧道构建之PingTunnel
  • 原文地址:https://www.cnblogs.com/zhangxinyue/p/13917406.html
Copyright © 2011-2022 走看看