java后台分页实例一

后台框架：jfinal + velocity、前台框架：jquery

 页面

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" type="text/css" href="./student.css"/>
    <script type="text/javascript" src="./jquery.min.js"></script>
    <script type="text/javascript" src="./common.js"></script>
    <style >
       .pager a{display:inline-block;background: red;color:#ffffff;padding: 10px;text-decoration: none;} 
   </style>
</head>

<body>
                <table cellpadding="0" cellspacing="0">
                    <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>性别</th>
                    </tr>
                  #foreach($!stu in $!pager.list)
                    <tr>
                        <td>
                           $velocityCount
                        </td>
                        <td>
                            $!stu.name
                        </td>
                        <td>
                            $!stu.sex
                        </td>
                    </tr>
                    #end
                </table>
            </div>
            
          <div class ="pager">
            <a href="javascript:void(0);" onclick="firstPage();" >首页</a>
            <a href="javascript:void(0);" onclick="previousPage();" >上一页</a>
            <a href="javascript:void(0);" onclick="nextPage();" >下一页</a>
            <a href="javascript:void(0);" onclick="lastPage();" >尾页</a>
         </div>
         
         <div class="pager-info">
         当前页数：<span>$!pager.currentPage</span>
         总记录数：<span>$!pager.totalRecord</span>
         总记页数：<span>$!pager.totalPage</span>
         </div>
          
       
       <script type="text/javascript">

            var currentPage = "$!pager.currentPage";
            if(!currentPage){
              currentPage = 1;
            }
            var totalPage = "$!pager.totalPage";
            
            //首页
            function firstPage(){
              if(currentPage == 1){
                alert("已经是第一页数据");
                return 
              }else{
                common.requestForm({
                url:"/oaweb/datatask/paginate",
                data:{pageSize:5,pageNo:1}
                });
              }
            }
            
            //上一页
            function previousPage(){
              if(currentPage == 1){
                alert("已经是第一页数据");
                return 
              }else{
                common.requestForm({
                url:"/oaweb/datatask/paginate",
                data:{pageSize:5,pageNo:parseInt(currentPage)-1}
                });
              }
            }
            
            //下一页
            function nextPage(){
              if(currentPage == totalPage){
                alert("已经是最后一页数据");
                return 
              }else{
                common.requestForm({
                url:"/oaweb/datatask/paginate",
                data:{pageSize:5,pageNo:parseInt(currentPage)+1}
                });
              }
            }
            
            //尾页
            function lastPage(){
              if(currentPage == totalPage){
                alert("已经是最后一页数据");
                return 
              }else{
                common.requestForm({
                url:"/oaweb/datatask/paginate",
                data:{pageSize:5,pageNo:totalPage}
                });
              }
            }
            
            </script>
</body>
</html>

 

js封装请求方法(common.js)

function Common(){
}

Common.prototype = {
requestForm:function(option) {
        var _option = {
            url : "",
            data : {}
        };
        $.extend(_option, option);
        var form = $("<form>").attr("action",_option.url).attr("method","POST").appendTo($("body"));
        $.each(_option.data,function(k,v){
            $("<input>").attr("type","hidden").attr("name",k).attr("value",v).appendTo(form)
        });
        form.submit();
    }
}

 

Controller

public class StudentController extends Controller{

public void paginate(){
        Integer pageNo = getParaToInt("pageNo");
        pageNo = pageNo==null?1:pageNo;
        Integer pageSize =getParaToInt("pageSize");
        pageSize = pageSize==null?5:pageSize;
        Record record = new Record();
        Pager<Record> pager = StudentService.myPaginate(record,pageNo,pageSize);
        setAttr("page", pager);
        render("/school/html/student/student_index.htm");
    }
    
}

 

Service

public class StudentService{

public static Pager<Record> myPaginate(Record record,int pageNo,int pageSize){
        List<Record> list = getDataList();
        Pager<Record> pager = new Pager<Record>(pageNo,pageSize,list);
        return pager;
    }
    
}

 

 Pager类封装分页信息

import java.util.List;

public class Pager<T> {
    
    private Integer pageSize;
    
    private Integer totalRecord;
    
    private Integer totalPage;
    
    private Integer currentPage;
    
    private List<T> list;
    
    public Integer getPageSize() {
        return pageSize;
    }

    public void setPageSize(Integer pageSize) {
        this.pageSize = pageSize;
    }

    public Integer getTotalRecord() {
        return totalRecord;
    }

    public void setTotalRecord(Integer totalRecord) {
        this.totalRecord = totalRecord;
    }

    public Integer getTotalPage() {
        return totalPage;
    }

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

    public Integer getCurrentPage() {
        return currentPage;
    }

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

    public List<T> getList() {
        return list;
    }

    public void setList(List<T> list) {
        this.list = list;
    }


    public Pager(Integer pageNo,Integer pageSize,List<T> sourceList){
         if(sourceList==null){
             return;
         }
         
         //总记录数
         this.totalRecord = sourceList.size();
         
         //每页显示多小条数据
         this.pageSize = pageSize;
         
         //总页数
         this.totalPage = this.totalRecord % this.pageSize == 0?this.totalRecord/this.pageSize:this.totalRecord/this.pageSize+1;
         
         //当前第几页
         if(this.totalPage < pageNo){
             this.currentPage = this.totalPage;
         }else{
             this.currentPage = pageNo;
         }
         
         
         //起始索引
         Integer fromIndex = this.pageSize * (this.currentPage - 1);
         
         //结束索引
         Integer endIndex = null;
         if(this.pageSize * this.currentPage >this.totalRecord){
             endIndex = this.totalRecord;
         }else{
             endIndex = this.pageSize * this.currentPage;
         }
         
         this.list = sourceList.subList(fromIndex, endIndex);
    }

}

 

总结：

此实例用subList功能分页，后续会用数据库SQL来完成分页。

posted @ 2017-02-12 15:07  N神3  阅读(10076)  评论(0)  编辑  收藏  举报