功能说明
将数据从数据库取出，封装传递到页面，展示。
效果展示：
功能分析
- 数据库表结构，分类数据跟线路信息是一对多关系
- 点击分类线路之后通过ajax发送请求传递cid，当前页码，一页显示的条数，在数据库使用limit分页查询数据，并将数据封装返回
- 页面展示
一页展示5条，显示10个页码， - 页码展示
页码显示规则为前5后4，例如当前页为7，页码显示2-11，前面不够5页码默认1-10，后面不够4页码默认（最大页码- 9）- 最大页码
效果
代码实现
PageBean类定义
package cn.itcast.travel.domain;
import java.util.List;
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;
}
}
ajax请求：
$(function(){
var cid = getParameter("cid");
load(cid);
});
function load(cid,currentPage,pageSize){
$.post("route/pageQuery",{
cid:cid,currentPage:currentPage,pageSize:pageSize},function(data){
//函数体，处理返回的数据
}
servlet
@WebServlet("/route/*")
public class RouteServlet extends BaseServlet {
private RouteService routeService = new RouteServiceImpl();
public void pageQuery(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获取cid
String cidStr = req.getParameter("cid");
//获取当前页码
String currentPageStr = req.getParameter("currentPage");
//获取一页显示的条数
String pageSizeStr = req.getParameter("pageSize");
//判断并初始化cid的值
int cid = 0;
if(cidStr != null || currentPageStr.length() > 0){
cid = Integer.parseInt(cidStr);
}
//判断并初始化当前页码
int currentPage = 1;
if(currentPageStr != null && currentPageStr.length() > 0 && Integer.parseInt(currentPageStr) > 0){
currentPage = Integer.parseInt(currentPageStr);
}
//判断并初始一页显示条数
int pageSize = 5;
if(pageSizeStr != null && pageSizeStr.length() > 0){
pageSize = Integer.parseInt(pageSizeStr);
}
//调用servi获取数据
PageBean pageBean = routeService.pageQuery(cid, currentPage, pageSize);
//返回json数据
writeValue(resp,pageBean);
}
}
service
public class RouteServiceImpl implements RouteService {
private RouteDao routeDao = new RouteDaoImpl();
/**
* 分页查询
* @param currentPage
* @param pageSize
* @return
*/
@Override
public PageBean pageQuery(int cid,int currentPage, int pageSize) {
PageBean pageBean = new PageBean();
pageBean.setPageSize(pageSize);
int totalCount = routeDao.findTotalCount(cid);
pageBean.setTotalCount(totalCount);
int totalPage = totalCount % pageSize == 0 ? totalCount / pageSize : (totalCount / pageSize) + 1;
pageBean.setTotalPage(totalPage);
if(currentPage > totalPage){
currentPage = totalPage;
}
pageBean.setCurrentPage(currentPage);
int start = (currentPage - 1) * pageSize;
List<Route> routeList = routeDao.pageQuery(cid, start, pageSize);
pageBean.setRouteList(routeList);
return pageBean;
}
}
dao
public class RouteDaoImpl implements RouteDao {
private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
/**
* 查询总条数
* @return
*/
@Override
public int findTotalCount(int cid) {
String sql = "select count(rid) from tab_route where cid = ?";
Integer count = template.queryForObject(sql, Integer.class,cid);
return count;
}
/**
* 分页查询数据
* @param start
* @param pageSize
* @return
*/
@Override
public List<Route> pageQuery(int cid,int start, int pageSize) {
List<Route> routeList = null;
try{
String sql = "select * from tab_route where cid = ? limit ?,?";
routeList = template.query(sql, new BeanPropertyRowMapper<Route>(Route.class), cid, start, pageSize);
}catch(Exception e){
e.printStackTrace();
}
return routeList;
}
}
前端数据展示
<script>
$(function(){
var cid = getParameter("cid");
load(cid);
});
function load(cid,currentPage,pageSize){
$.post("route/pageQuery",{
cid:cid,currentPage:currentPage,pageSize:pageSize},function(data){
//线路数据插入
var route_details = "";
for(var i = 0; i < data.list.length; i++){
route_details += '<li>\n' +
' <div class="img"><img src="'+ data.list[i].rimage +'" height="169px"></div>\n' +
' <div class="text1">\n' +
' <p>'+data.list[i].rname+'</p>\n' +
' <br/>\n' +
' <p>'+data.list[i].routeIntroduce+'</p>\n' +
' </div>\n' +
' <div class="price">\n' +
' <p class="price_num">\n' +
' <span>¥</span>\n' +
' <span>'+ data.list[i].price +'</span>\n' +
' <span>起</span>\n' +
' </p>\n' +
' <p><a href="route_detail.html">查看详情</a></p>\n' +
' </div>\n' +
' </li>';
}
$("#route_details").html(route_details);
var page_count = '<i></i> 共 <span>'+ data.totalPage +'</span>页<span>'+ data.totalCount +'</span>条';
$("#page_count").html(page_count);
//分页页码插入
var msg = '<li style="cursor:pointer;" οnclick="load('+ cid +','+ 1 +')" ><a href="javascript:void()">首页</a></li>';
if(data.currentPage == 1){
msg += '<li style="cursor: not-allowed;" οnclick="load('+ cid +','+ (data.currentPage - 1) +','+ data.pageSize +')" class="threeword"><a style="cursor: not-allowed;" href="javascript:void()">上一页</a></li>';
}else{
msg += '<li style="cursor:pointer;" οnclick="load('+ cid +','+ (data.currentPage - 1) +','+ data.pageSize +')" class="threeword"><a href="javascript:void()">上一页</a></li>';
}
//初始化开始页码和结束页码
var begin = 0;
var end = 0;
if((data.currentPage - 5) <= 0){
begin = 1;
end = 10;
}else if((data.currentPage + 4) >= data.totalPage){
end = data.totalPage;
begin = end - 9;
}else{
begin = data.currentPage - 5;
end = data.currentPage + 4;
}
for(var i = begin; i <= end; i++){
if(i == data.currentPage){
msg += '<li style="cursor:pointer;" οnclick="load('+ cid +','+ i +','+ data.pageSize +')" class="curPage"><a href="javascript:void()">'+ i +'</a></li>';
}else{
msg += '<li style="cursor:pointer;" οnclick="load('+ cid +','+ i +','+ data.pageSize +')"><a href="javascript:void()">'+ i +'</a></li>';
}
}
if(data.currentPage == data.totalPage){
msg += '<li style="cursor: not-allowed;" οnclick="load('+ cid +','+ (data.currentPage + 1) +','+ data.pageSize +')" class="threeword"><a style="cursor: not-allowed;" href="javascript:void()">下一页</a></li>';
}else{
msg += '<li οnclick="load('+ cid +','+ (data.currentPage + 1) +','+ data.pageSize +')" class="threeword"><a href="javascript:void()">下一页</a></li>';
}
msg += '<li style="cursor:pointer;" οnclick="load('+ cid +','+ data.totalPage +','+ data.pageSize +')" class="threeword"><a href="javascript:void()">末页</a></li>';
$("#page_li").html(msg);
//定位到页面顶部
window.scrollTo(0,0);
});
}
</script>
完成