后台框架：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來完成分頁。