简单分页案例

缺乏、安全感 2021-11-11 03:24 426阅读 0赞

我使用的是索引分页，这里我以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 }页  当前第${result.currentPage }页
                            <a href="#" οnclick="first();">首页</a><a href="#" οnclick="previousPage();">上一页</a> 
    　　　　　　　　　　　　　　<a href="#" οnclick="nextPage();">下一页</a><a href="#" οnclick="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>

我的实现效果：

![1593813-20190723145720199-495302316.png][]

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

![1593813-20190723145921240-1082774541.png][]

转载于:https://www.cnblogs.com/chuangqi/p/11231863.html

[1593813-20190723145720199-495302316.png]: /images/20211109/7eed77d3739c4b05bed9b2320e0e7a91.png
[1593813-20190723145921240-1082774541.png]: /images/20211109/57fc8f6d99b34b95afeceb765a0a7522.png