zoukankan      html  css  js  c++  java
  • (首页上一页下一页尾页 + 下拉框跳转)分页功能

    说在前头(本人用的是bootstrap +jQuery 和 struts2 +  MVC)不影响分页功能

    制作一个分页功能:

    效果如下:

    由上图可知,此功能只适合页数不是特别多的情况下,页数多的时候,每次都要求得总记录数,太慢了。

    【一】:1、总记录数,2、总页数,3、每页记录数,4、当前页

    【二】:首页,上一页,下一页,尾页

    【三】:直接跳转

    一、java后台分页model

    public class PageModel<T> {
    private int pageSize; //分页每一页的记录数
    private int pageNum=1; //当前页号
    private int totalCount; //总记录数
    private List<T> result; //整个记录
    //totalpage 总页数,通过计算 直接get得到
    /*。。。。。。。*/
    public int getTotalPage(){
    return (totalCount - 1) / pageSize + 1;
    }
    /*。。。。。*/
    }

    二、DAO层

    这层就不写了,主要就是获取列表
    sql 语句我用的是 StringBuilder ,动态添加需要的参数

    int totalCount = queryForInt(countSql.toString(), params.toArray());
    List<ProductBean> result = query(ProductBean.class,sql.toString(), params.toArray());

    PageModel<ProductBean> pageModel = new PageModel<ProductBean>(pageSize,pageNum,totalCount,result);

    三、Action层

    private PageModel<ProductBean> pageModel ;
    private List<KindBean> upList ;
    private List<KindBean> dols;
    private int pagesize=2;//初始化,为了第一次进来能有个值
    private int pagenum = 1;//同上
    参数:省略get,set
    public int getPagebegin(){
    return (pagenum-1)*pagesize;
    }
    public int getPageend(){
    int a=pagenum*pagesize-1 , b=pageModel.getResult().size()-1;//注意这个,两个都要-1
    if(a < b) return a;
    else return b;
    }
    在以上get,set以外,再加两个

    System.out.println("page:" +pagesize + " " + pagenum );
    pageModel = dao.searchForPage(pagesize, pagenum);
    if(pageModel.getResult().size() == 0 ){
    return "error";
    }
    获得到pagesize 和pagenum,再将要用的值传到DAO层,去数据库里找值,
    【注意】当size为0时要返回错误,跳向没有数据的查询失败页面

    四、JSP层

    <s:iterator value="pageModel.result " var="pro" begin="pagebegin " end="pageend ">
    <div>
    </div>
    </s:iterator>
    中间加上循环的部分,pagebegin 直接会调用 后面的getPagebegin函数,pageend同理。


    <div class="row" style="text-align:center">
    <div class="col-md-6">
    <span>共有</span>
    <span class="text-primary"> ${pageModel.totalCount } </span><span>条记录  共</span>
    <span class="text-primary"> ${pageModel.totalPage } </span><span>页  每页</span>
    <span class="text-primary"> ${pageModel.pageSize } </span><span>条记录 当前</span>
    <span class="text-primary"> ${pageModel.pageNum } / ${pageModel.totalPage } </span><span>页</span>
    </div>
    <div class="col-md-6">
    <span>
    <a href="productAction?pagenum=1 " >首页</a>
    <s:if test="pageModel.pageNum == 1">
    <a href="productAction?pagenum=1" >上一页</a>
    </s:if>
    <s:else>
    <a href="productAction?pagenum=${pageModel.pageNum-1 } >上一页</a>
    </s:else>
    <s:if test="pageModel.pageNum == pageModel.totalPage">
    <a href="productAction?pagenum=${pageModel.totalPage } >下一页</a>
    </s:if>
    <s:else>
    <a href="productAction?pagenum=${pageModel.pageNum+1 } >下一页</a>
    </s:else>
    <a href="productAction?pagenum=${pageModel.totalPage } >尾页</a>
    </span>
    <span>转到</span>

    <select class="control" id="pagenum" name="pageModel.pageNum" οnchange="turnPage()" style="40px" >
    <s:iterator var="num" begin="1" end="pageModel.totalPage">
    <option value="${num }" >${num }</option>
    </s:iterator>
    </select>
    <span>页</span>
    </div>
    </div>
    【一】:应该没什么号说明的,直接取出值来
    【二】:分页的时候,首页和尾页直接就是固定值。上一页和下一页要判断一下。
    【三】:重点一、在于下拉框里的值从1到总页数,重点二、onchange函数,

    jquery:

    // 选框跳转页面
    function turnPage(){
    var num = $("#pagenum").val();
    //alert(num );
    window.location.href="productAction?pagenum="+num;
    }

    这个时候看似完美了,你会发现还缺少一点,因为跳转完后,下拉框的值还是原来的1,所以这个也要进行改变。
    jsp:

    <!-- 用来将当前页面的值设置到 页面跳转框里 -->
    <input type="hidden" id="pageNum" name="pageNum" value="${pageModel.pageNum }" >
    jquery:
    $(function(){
    //设置跳转页面框里的值
    $("#pagenum").val( $("#pageNum").val());
    });


    可以再优化的部分:

    【一】可以用ajax分页,这样不刷新网页,更好

  • 相关阅读:
    Algebra, Topology, Differential Calculus, and Optimization Theory For Computer Science and Machine Learning 第8章 读书笔记(待更新)
    Webpack 2 视频教程 007
    Hie with the Pie
    P4550 收集邮票
    Bloodsucker
    P2627 [USACO11OPEN]Mowing the Lawn G
    SP1026 FAVDICE
    HDU4405 Aeroplane chess
    Card Collector
    LOOPS(概率dp)
  • 原文地址:https://www.cnblogs.com/JurasVon/p/12033592.html
Copyright © 2011-2022 走看看