zoukankan      html  css  js  c++  java
  • 简单分页案例

    我使用的是索引分页,这里我以ssh框架的分页用例讲解:

    分页类Page.java

     1 public class Pager<T> {
     2     private Integer totalPage;   // 总页数
     3     private Integer currentPage; // 当前页码
     4     private Integer totalRecord; // 总记录数
     5     private Integer pageSize;    // 每页记录数
     6     public List<T> list;
     7     private boolean flag;
     8     
     9     public Pager() {
    10         super();
    11     }
    12     public Pager(Integer pageSize, Integer pageNo, List<T> list) {
    13         if(list == null || list.isEmpty() || list.size() == 0) {
    14             this.flag = list.isEmpty();
    15             return;
    16         }
    17         this.totalRecord = list.size();
    18         this.pageSize = pageSize;
    19         this.list = list;
    20         // 总页数
    21         this.totalPage = this.totalRecord%this.pageSize == 0 ? this.totalRecord/this.pageSize:(this.totalRecord/this.pageSize) + 1;
    22         // 当前第几页
    23         if(this.totalPage < pageNo) {
    24             this.currentPage = this.totalPage;
    25         }else {
    26             this.currentPage = pageNo;
    27         }
    28         // 起始索引 
    29         Integer startIndex = this.pageSize*(this.currentPage - 1); 
    30         // 结束索引 
    31         Integer endIndex = this.pageSize*this.currentPage > this.totalRecord ? this.totalRecord:this.pageSize*this.currentPage; 
    32         
    33         this.list = list.subList(startIndex, endIndex);
    34         
    35     }
    36 
    37     public Integer getTotalPage() {
    38         return totalPage;
    39     }
    40     public void setTotalPage(Integer totalPage) {
    41         this.totalPage = totalPage;
    42     }
    43     public Integer getCurrentPage() {
    44         return currentPage;
    45     }
    46     public void setCurrentPage(Integer currentPage) {
    47         this.currentPage = currentPage;
    48     }
    49     public Integer getTotalRecord() {
    50         return totalRecord;
    51     }
    52     public void setTotalRecord(Integer totalRecord) {
    53         this.totalRecord = totalRecord;
    54     }
    55     public Integer getPageSize() {
    56         return pageSize;
    57     }
    58     public void setPageSize(Integer pageSize) {
    59         this.pageSize = pageSize;
    60     }
    61     public List<T> getList() {
    62         return list;
    63     }
    64     public void setList(List<T> list) {
    65         this.list = list;
    66     }
    67     public boolean isFlag() {
    68         return flag;
    69     }
    70     public void setFlag(boolean flag) {
    71         this.flag = flag;
    72     }
    73     
    74 }

    action层的调用方法:

        /**
        * 分页显示菜品套餐信息
        */
        public String findBypage() {

            HttpServletRequest request = ServletActionContext.getRequest();
         // 获取当前页 number
    = request.getParameter("pageNumber"); if(number != null&&!number.equals("")) { pageNo = Integer.parseInt(number); } pageNo = pageNo == null?1:pageNo;
         // 获取每页记录数 size
    = request.getParameter("pageSize"); if(size != null&&!size.equals("")) { pageSize = Integer.parseInt(size); } pageSize = pageSize == null ? 5:pageSize;
          pager
    = mealService.findByPage(pageSize, pageNo, meal); request.setAttribute("result", pager); forwardView = LIST_JSP; return SUCCESS; }

    service层:

    1   @Override
    2     public Pager<Meal> findByPage(Integer pageSize, Integer pageNo, Meal meal) {
    3         return mealDao.findByPage(pageSize, pageNo, meal);
    4     }

    dao层方法:

       /**
         * 分页显示菜品套餐信息
         */
        public Pager<Meal> findByPage(Integer pageSize, Integer pageNo, Meal meal){
            List<Meal> list = find(meal);
            Pager<Meal> pager = new Pager<Meal>(pageSize, pageNo, list);
            return pager;
        }

    jsp页面:(只给出了部分代码)

    <!--展示的列表信息 -->
    <table id="meal_table" class="table table-hover text-center"> <tr> <th>菜品套餐编号</th> <th>菜品套餐名称</th>  <th>菜品套餐价格</th> <th>菜品套餐描述</th> <th width="310">操作</th> </tr> <s:iterator value="pagerMeal.list"> <tr> <td>${mealId }</td> <td>${mealName }</td> <td>${mealPrice }</td> <td>${mealDescribe }</td> <td>
                  <div class="button-group">
                    <button id ="preview_btn" class="button border-main" type="button" onclick = "order(${mealId })" >订餐</button>
                  </div>
                </td> </tr> </s:iterator> <tr> <td colspan="8"> <div class="pagelist"> 共${result.totalRecord }条记录共${result.totalPage }页&nbsp;&nbsp;当前第${result.currentPage }页 <a href="#" onclick="first();">首页</a><a href="#" onclick="previousPage();">上一页</a>
                  <a href="#" onclick="nextPage();">下一页</a><a href="#" onclick="lastPage()">尾页</a> </div> </td> </tr> </table>     <!--分页执行方法 -->    <script type="text/javascript"> var url = "Order_list.action"; var currentPage = ${result.currentPage}; var totalPage = ${result.totalPage}; // 上一页 function previousPage(){ console.log("上一页=="+currentPage); if(currentPage > 1){ window.location.href = url+"?pageNumber="+(currentPage-1); } } // 首页 function first(){ window.location.href = url+"?pageNumber=1"; } // 下一页 function nextPage(){ console.log("上一页"+currentPage); console.log("下一页"+totalPage); if(currentPage < totalPage){ window.location.href = url+"?pageNumber="+(currentPage+1); } } // 尾页 function lastPage(){ if(currentPage == totalPage){ return; }else{ window.location.href = url+"?pageNumber="+totalPage; } } </script>

    我的实现效果:

    写的比较low,大家可以找个好看的分页组件。像这种:

  • 相关阅读:
    10.11-10.16
    10.8-10.10
    9.26-28
    9.29css继承属性
    表单的学习
    排版
    css补充
    今天学的新内容
    新内容
    文本样式的修改
  • 原文地址:https://www.cnblogs.com/chuangqi/p/11231863.html
Copyright © 2011-2022 走看看