模拟百度分页(前5后4)
定义一个页面的JavaBean,作为数据传输对象(DTO)
public class PageBean < T > {
private int totalCount;
private int totalPage;
private int currentPage;
private int pageSize;
private List < T > list;
public int getTotalCount ( ) {
return totalCount;
}
public void setTotalCount ( int totalCount) {
this . totalCount = totalCount;
}
public int getTotalPage ( ) {
return totalPage;
}
public void setTotalPage ( int totalPage) {
this . totalPage = totalPage;
}
public int getCurrentPage ( ) {
return currentPage;
}
public void setCurrentPage ( int currentPage) {
this . currentPage = currentPage;
}
public int getPageSize ( ) {
return pageSize;
}
public void setPageSize ( int pageSize) {
this . pageSize = pageSize;
}
public List < T > getList ( ) {
return list;
}
public void setList ( List < T > list) {
this . list = list;
}
}
JS代码部分,通过Ajax技术把当前页码,与显示条数数传给后台,后台把呈现在页面的数据传回来,动态在页面显示,定义一个load方法,用于加载页面的
function load ( cid, currentPage, rname) {
$. get ( "pageQueryServlet" , { cid: cid, currentPage: currentPage, rname: rname} , function ( pb) {
$( "#totalPage" ) . html ( pb. totalPage) ;
$( "#totalCount" ) . html ( pb. totalCount) ;
var lis= "" ;
var first= ' <li οnclick="javascript:load(' + cid+ ',1,\'' + rname+ '\')"><a href="javascript:void(0)">首页</a></li>' ;
var beforeNum= pb. currentPage- 1 ;
if ( beforeNum<= 0 ) {
breforNum= 1 ;
}
var pre= '<li οnclick="javascript:load(' + cid+ ',' + beforeNum+ ',\'' + rname+ '\')" class="threeword"><a href="javascript:void(0)">上一页</a></li>' ;
lis+= first;
lis+= pre;
var begin;
var end;
if ( pb. totalPage< 10 ) {
begin= 1 ;
end= pb. totalPage;
} else {
begin= pb. currentPage- 5 ;
end= pb. currentPage+ 4 ;
if ( begin< 1 ) {
begin= 1 ;
end= begin+ 9 ;
}
if ( end> pb. totalPage) {
end= pb. totalPage;
begin= end- 9 ;
}
}
for ( var i= begin; i<= end; i++ ) {
var li;
if ( pb. currentPage== i) {
li= ' <li class="curPage" οnclick="javascript:load(' + cid+ ',' + i+ ',\'' + rname+ '\')"><a href="javascript:void(0)">' + i+ '</a></li>' ;
} else {
li= ' <li οnclick="javascript:load(' + cid+ ',' + i+ ',\'' + rname+ '\')"><a href="javascript:void(0)">' + i+ '</a></li>' ;
}
lis+= li;
}
var nextPage= pb. currentPage+ 1 ;
if ( nextPage> pb. totalPage) {
nextPage= totalPage;
}
var next= ' <li οnclick="javascript:load(' + cid+ ',' + nextPage+ ',\'' + rname+ '\')" class="threeword"><a href="javascript:void(0)">下一页</a></li>' ;
var last= '<li οnclick="javascript:load(' + cid+ ',' + pb. totalPage+ ',\'' + rname+ '\')" class="threeword"><a href="javascript:void(0)">末页</a></li>' ;
lis+= next;
lis+= last;
$( "#pageNum" ) . html ( lis) ;
var route_lis= "" ;
for ( var i= 0 ; i< pb. list. length; i++ ) {
var route= pb. list[ i] ;
var li= '<li>\n' +
' <div class="img"></div>\n' +
' <div class="text1">\n' +
' <p>' + route. rname+ '</p>\n' +
' <br/>\n' +
' <p>' + route. routeIntroduce+ '</p>\n' +
' </div>\n' +
' <div class="price">\n' +
' <p class="price_num">\n' +
' <span>¥</span>\n' +
' <span>' + route. price+ '</span>\n' +
' <span>起</span>\n' +
' </p>\n' +
' <p><a href="route_detail.html?rid=' + route. rid+ '">查看详情</a></p>\n' +
' </div>\n' +
' </li>' ;
route_lis+= li;
}
$( "#route" ) . html ( route_lis) ;
window. scrollTo ( 0 , 0 ) ;
} ) ;
定义一个servlet,用于接收当前页码,显示条数,查询出一个PageBean对象序列化为JSON数据传到前台
@WebServlet ( "/pageQueryServlet" )
public class PageQueryServlet extends HttpServlet {
protected void doPost ( HttpServletRequest request, HttpServletResponse response) throws ServletException , IOException {
String currentPageStr = request. getParameter ( "currentPage" ) ;
String pageSizeStr = request. getParameter ( "pageSize" ) ;
String cidStr= request. getParameter ( "cid" ) ;
String rname = request. getParameter ( "rname" ) ;
rname= new String ( rname. getBytes ( "iso-8859-1" ) , "utf-8" ) ;
int cid= 0 ;
if ( cidStr!= null && cidStr. length ( ) > 0 && ! "null" . equals ( cidStr) ) {
cid= Integer . parseInt ( cidStr) ;
}
int currentPage= 0 ;
if ( currentPageStr!= null && currentPageStr. length ( ) > 0 ) {
currentPage= Integer . parseInt ( currentPageStr) ;
} else {
currentPage= 1 ;
}
int pageSize= 0 ;
if ( pageSizeStr!= null && pageSizeStr. length ( ) > 0 ) {
pageSize= Integer . parseInt ( pageSizeStr) ;
} else {
pageSize= 5 ;
}
RouteService service= new RouteServiceImpl ( ) ;
PageBean < Route > pb = service. pageQuery ( cid, currentPage, pageSize, rname) ;
ObjectMapper mapper= new ObjectMapper ( ) ;
response. setContentType ( "application/json;charset=utf-8" ) ;
mapper. writeValue ( response. getOutputStream ( ) , pb) ;
}
protected void doGet ( HttpServletRequest request, HttpServletResponse response) throws ServletException , IOException {
doPost ( request, response) ;
}
}
效果显示