mysql——分页技术实现(基于layui框架)

一.分页技术概述

分页技术:

JSP页面,用来显示数据! 如果数据有多条,分页显示,每页显示10条,多页; 好处: 利于页面布局,且显示的效率高!

分页关键点:

1.分页SQL语句 SELECT * FROM car LIMIT [(当前页-1)*每页显示的行数],[每页显示的行数];
2.后台处理: dao/service/servlet/JSP

实现步骤:
  1. 环境准备
    a) 引入jar文件
    i. 数据库驱动包
    ii. BaseDao引用
    qr.update(sql);
    b) 公用类: JdbcUtils.java
  2. 先设计:PageBean.java
  3. Dao接口设计/实现: 2个方法
  4. Service/servlet
  5. JSP

效果展示

二.实现思路:

1.通过jsp页面发送请求到servlet 然后servlet将调用service层处理将结果放在pageBean中
2.service层计算并数据调用dao层
3.dao层访问数据库通过pageBean中已知的数据查找相应的数据

三.实现代码

工具类:PageBean.java

package com.huan.pool.bean;


import java.util.List;

/**封装分页的参数
 * Created by 马欢欢 on 2017/5/29.
 */
public class PageBean {
    private int currentPage=1;//当前页
    private int pageCount=10;//每页显示的行数(查询返回的行数)默认每页显示4行
    private int totalCount;//总记录数
    private List  pageData;//分页查询到的数据
    private int totalPage;//总页数=总记录数、每页显示的行数(有余数+1)

    public int getCurrentPage() {
        if(totalCount % pageCount == 0){
            totalPage = totalCount / pageCount;
        }else {
            totalPage = totalCount / pageCount +1;
        }
        return currentPage;
    }

    public void setCurrentPage(int currentPage) {
        this.currentPage = currentPage;
    }

    public int getPageCount() {
        return pageCount;
    }

    public void setPageCount(int pageCount) {
        this.pageCount = pageCount;
    }

    public int getTotalCount() {
        return totalCount;
    }

    public void setTotalCount(int totalCount) {
        this.totalCount = totalCount;
    }

    public int getTotalPage() {
        return totalPage;
    }

    public void setTotalPage(int totalPage) {
        this.totalPage = totalPage;
    }

    public List getPageData() {
        return pageData;
    }

    public void setPageData(List pageData) {
        this.pageData = pageData;
    }


}

Dao层实现代码:

 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        req.setCharacterEncoding("utf-8");
        String method = req.getParameter("method");

        if ("tronClasstype".equals(method)) {
            tronClasstypeFind(req, resp);
        } else if ("save".equals(method)) {
            save(req, resp);
        } else if ("pool".equals(method)) {
            pool(req, resp);
        } else if ("pages".equals(method)) {
            pages(req, resp);
        }

    }

//查询总数量
  public int getTotalCount() throws Exception {
    PreparedStatement pstmt = null;
    Connection conn = null;
    conn = ConnUtil.getConnextion();
    String sql = " SELECT count(*) FROM eu_tronclass  ; ";

        pstmt = conn.prepareStatement(sql);
        ResultSet rs = pstmt.executeQuery();
        while(rs.next()) {
            return rs.getInt(1);
        }
        ConnUtil.close(rs, pstmt, conn);

        return 0;
}
//@Test
//public void aaa(){
//    PageBean pageBean = new PageBean();
//    pageBean.setPageCurrent(2);
//    try {
//        getAll(pageBean);
//    } catch (Exception e) {
//        e.printStackTrace();
//    }
//}

    public void getAll(PageBean pageBean) throws Exception {
        int totalCount = this.getTotalCount();//总记录数
        pageBean.setTotalCount(totalCount);//填充总记录数

        /*
         * 问题: jsp页面,如果当前页为首页,再点击上一页报错!
         *              如果当前页为末页,再点下一页显示有问题!
         * 解决:
         *     1. 如果当前页 <= 0;       当前页设置当前页为1;
         *     2. 如果当前页 > 最大页数;  当前页设置为最大页数
         */
         // 判断
        if (pageBean.getPageCurrent() <=0) {
            pageBean.setPageCurrent(1);                     // 把当前页设置为1
        } else if (pageBean.getPageCurrent() > pageBean.getTotalPage()){
            pageBean.setPageCurrent(pageBean.getTotalPage());       // 把当前页设置为最大页数
        }

        int pageCurrent = pageBean.getPageCurrent();//当前页
        int index = (pageCurrent -1)*pageBean.getPageCount();//起始查询位置
        int count = pageBean.getPageCount();//每页显示的数量
        String sql = "select * from eu_tronclass limit ?,?";
        Object[] paramsValue = {index,count};
        List <TronClasstype> list = super.query(sql,paramsValue,TronClasstype.class);
        pageBean.setPageData(list);
        JSONArray jsonArray = JSONArray.fromObject(list);
        System.out.println("getAll"+jsonArray);
    }

servlet层

 /**
     * 查询分页显示
     */
    protected void pool(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        PageBean pageBean = new PageBean();
        int pageCurrent = Integer.parseInt(req.getParameter("curr"));
//        int pageCurrent=1;
        pageBean.setPageCurrent(pageCurrent);
        tronClassService.getAll(pageBean);
        List<TronClasstype> TronClasstypelist = pageBean.getPageData();
        JSONArray jsonArray = JSONArray.fromObject(TronClasstypelist);
        resp.getWriter().print(jsonArray);
        System.out.println("servlet" + jsonArray);
    }
    /**
     * 将总页数分封装在session
     */
    protected void pages(HttpServletRequest req, HttpServletResponse resp) {
        PageBean pageBean = new PageBean();
        tronClassService.getAll(pageBean);
        System.out.println("99999:"+pageBean.getTotalPage());
        req.getSession().setAttribute("pages",pageBean.getTotalPage());

        try {
            resp.getWriter().print(pageBean.getTotalPage());
        } catch (IOException e) {
            e.printStackTrace();
        }

    }
jsp页面中第一次先创建Session 在servlet的pages方法中获取分页数放入session
var url ="http://localhost:8080/";
$.post(url+"/TronClassServlet?method=pages",
    function (data, status) {
    }
);
jsp中js的核心代码:使用layui自带分页插件

1.从session域中得到总页数
2.用ajax访问servlet层查出数据并拼接到页面显示

<script type="text/javascript">
    $(document).ready(function () {
        var tronClasstype = [];
        var dataLength = [];
        //分页代码
        layui.use(['laypage', 'layer'], function() {
            var laypage = layui.laypage
//                , layer = layui.layer;
            laypage({
                cont: 'demo1'
                , groups: 5, //连续显示分页数
                jump: function(obj, first){
                    //得到了当前页,用于向服务端请求对应数据
                    var curr = obj.curr;
                    $.post("${pageContext.request.contextPath}/TronClassServlet?method=pool",
                        {
                            curr:curr
                        },
                        function (data, status) {
                            $(".tr_1").html("");
                            for (var i = 0; i < data.length; i++) {
                                dataLength.push(data[i]);
                                tronClasstype = data[i];
                                $(".tr_1").append("<tr> <td><input type='checkbox'></td>" +
                                    "<td>" + (i + 1) + "</td>" +
                                    "<td>" + tronClasstype['year'] + "</td>" +
                                    "<td>" + tronClasstype['tron_month'] + "</td>" +
                                    "<td>" + tronClasstype['eu_rj'] + "</td>" +
                                    "<td>" + tronClasstype['eu_xin'] + "</td>" +
                                    "<td>" + tronClasstype['eu_rw'] + "</td>" +
                                    "<td>" + tronClasstype['eu_ts'] + "</td>" +
                                    "<td>" + tronClasstype['eu_xiu'] + "</td>" +
                                    "<td>" + tronClasstype['eu_gz'] + "</td>" +
                                    "<td>" + tronClasstype['eu_kuai'] + "</td>" +
                                    "<td>" + tronClasstype['eu_ad'] + "</td>" +
                                    "<td>" + tronClasstype['eu_wc'] + "</td>" +
                                    "<td>" + tronClasstype['eu_wu'] + "</td>" +
                                    "<td>" + tronClasstype['eu_jr'] + "</td>" +
                                    "<td>" +
                                    "<a href='/manage/article_edit_1' class='layui-btn layui-btn-mini'>编辑</a>" +
                                    "<a href='javascript:;' data-id='1' data-opt='del' class='layui-btn layui-btn-danger layui-btn-mini'>删除</a>" +
                                    "</td> </tr>"
                                );
                            }

                        },
                        "json"
                    );

                }
                , pages: <%=session.getAttribute("pages") %>//总页数
            });
        });
    });
</script>

上一篇:连接池 —— DBCP技术 和 C3P0 技术

文章文集:JavaEE--学习笔记

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,884评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,755评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,369评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,799评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,910评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,096评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,159评论 3 411
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,917评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,360评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,673评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,814评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,509评论 4 334
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,156评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,882评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,123评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,641评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,728评论 2 351

推荐阅读更多精彩内容

  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,603评论 18 399
  • 一. Java基础部分.................................................
    wy_sure阅读 3,807评论 0 11
  • 小编费力收集:给你想要的面试集合 1.C++或Java中的异常处理机制的简单原理和应用。 当JAVA程序违反了JA...
    八爷君阅读 4,580评论 1 114
  • 这部分主要是与Java Web和Web Service相关的面试题。 96、阐述Servlet和CGI的区别? 答...
    杂货铺老板阅读 1,401评论 0 10
  • 都说哀默大于心死,用这句话形容此刻的金霞是再恰当不过了。想当年,瞅着这家日子不错,瞅着建设也算是有文化的人,匆...
    瑀轩阅读 397评论 0 0