Web网页的分页（一）

分页的基本实现：

首先分页要确定一下数据，一般都具有如下
1. 当前页
2. 总页数
3. 总记录数
4. 每页大小
5. 每页显示的数据内容（集合存储）

写一个分页的Bean对象 PageBean

根据数据定义具体的需要。

private int totalCount;  //总记录数
private int currentPage;//当前页
private int totalPage;//总页数
private int pageSize;//每页显示条数

private List<T> list;  //本页显示的列表

public int getTotalCount() {
      
      
    return totalCount;
}

public void setTotalCount(int totalCount) {
      
      
    this.totalCount = totalCount;
}

public int getCurrentPage() {
      
      
    return currentPage;
}

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

public int getTotalPage() {
      
      
    return totalPage;
}

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

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;
}

准备对数据库的数据进行查询

数据库连接使用druid数据库

考虑到模糊查询，使用StringBuilder

//查询每一页的记录数
public List<table> findByPage(int dataId,int start,int pageSize,String dataName){
        
        
  	JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource())
  	String sql = "select * from table where 1=1 ";//书写sql语句使用连接时候注意在此后面或者在后半句的前面加上空格，防止sql语句连接出错
  	StringBuilder builder = new StringBuilder(sql);
  	List list = new ArrarList();
  	if(dataName!=null&&dataName.length()>0){
        
        
      sql+="  and dataName like ?";
      list.add("%"+dataName+"%");
    }
  	if(dataId!=0){
        
        
      sql+=" and dataId = ? ";
      list.add(dataId);
    }
  	builder.append("limint ?,?")
    sql = builder.toString();
  	list.add(statr);
  	list.add(pageSize);
		return template.query(sql,new BeanPropertyRowMapper<table>(table.Class)list.toArray());
}
//查询总的记录数
public int findAllData(int dataId,String dataName){
        
        
  String sql ="select Count(*) from table where 1=1 ";
  StringBuilder builder = new StringBuilder(sql);
  	List list = new ArrarList();
  	if(dataName!=null&&dataName.length()>0){
        
        
      sql+="  and dataName like ?";
      list.add("%"+dataName+"%");
    }
  	if(dataId!=0){
        
        
      sql+=" and dataId = ? ";
      list.add(dataId);
    }
  	sql = builder.toString();
		return template.query(sql,Integer.Class,list.toArray());
}

使用的spring框架的JDBCTemplate

如下几个依赖：

<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-core</artifactId>
    <version>4.1.2.RELEASE</version>
    <scope>compile</scope>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-jdbc</artifactId>
    <version>4.1.2.RELEASE</version>
    <scope>compile</scope>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-tx</artifactId>
    <version>4.1.2.RELEASE</version>
    <scope>compile</scope>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-beans</artifactId>
    <version>4.1.2.RELEASE</version>
    <scope>compile</scope>
</dependency>

将查出来的数据进行处理封装到PageBean对象中

//封装对象
public  PageBean<table> pageQuery(int pageSize,int currentPage,String dataName,int dataId){
      
      
  	private Dao dao;
  	PageBean page = new PageBean();
  	int totalCount = dao.findAllDate(dataId,dataName);//总记录数
  	int start = (currentPage-1)*pageSize;//开始页为(当前页码-1)*页面大小(pageSize)
  	List<table> list = dao.findByPage(dataId,start,pageSize,dataName);
  	page.setTotalCount(total);
  	int totalPage = total%pageSize==0? total/pageSize:(total/pageSize)+1//总页数计算
  	page.setTotalPage(totalPage);
  	page.setCurrentPage(currentPage);
  	page.setPageSize(pageSize);
  	return page;
}

去接收发送来的分页数据处理并且将PageBean对象转发到页面上

public void pageQuery(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      
      
  private Service service;
  String cIdStr =  request.getParameter("cid");
  String currentPageStr = request.getParameter("currentPage");
  String dataNameStr = request.getParameter("dataName");
  String pageSizeStr = request.getParameter("pageSize");
  
  //判断数据
  if(cIdStr!=null&&cIDStr.length()>0&&!"null".equals(cIdStr)){
      
      
    Integer cid = Integer.parseInt(cIdStr);
  }
  if(pageSize!=null&&cIDStr.length()>0){
      
      
    Integer pageSize = Integer.parseInt(pageSize);
  }else{
      
      
    Integer pageSize = 5;
  }
  if(currentPageStr!=null&&currentPageStr.length()>0){
      
      
    Integer currentPageStr = Integer.parseInt(currentPageStr);
  }else{
      
      
    Integer currentPageStr = 1;
  }
  PageBean<table> pageBean = service.PageQuery(pageSize,currentPage,dataName,dataId);
  //写入页面
  ObjectMapper mapper = new ObjectMapper();
  response.setContentType("application/json;charset=utf-8");
  mapper.writeValue(response.getOutputStream(),pageBean);
}

在页面上处理后端传来的数据

此处是一个基于html网页的项目
主要注意的有：
1.前一页，后一页到达临界值时候的处理
2.对于一次显示多少个页面的计算
	//都是对当前页码进行操作
	减的数字为显示几页/2向下取整   加的数字为减的数字减1(奇数)
  减的数字为显示几页/2         加的数字为减的数字减1(偶数)

function pageQuery(dataId,dataName,currentPage){
      
      
  $.get(url,{
      
      dataId:dataId,dataName:dataName,currentPage:currentPage},function(data){
      
      
    $("#totalPage").html(data.totalPage);    //设置总页数和总记录数
    $("#totalCount").html(data.totalCount);
    var lis;  //处理分页
    var firstli = '<li οnclick="javascript:pageQuery('+dataId+',1,\''+dataName+'\')"><a href="javascript:void(0)">首页</a></li>';
    var prePage = currentPage-1;
    if(prePage<=0){
      
      
      prePage = 1;
    }
    var preli = '<li οnclick="javascript:pageQuery('+dataId+','+prePage+',\''+dataName+'\')" class="threeword"><a href="javascript:void(0)">上一页</a></li>';
    lis+=firstli;
    lis+=preli;
    var li;//放1 2 3... 的样式
    
    var begin; //开始   begin
    var end; //结束   end
    //如果总页数小于十页     起始页数为1  末页数为总页数
    if(data.totalPage<10){
      
      
      begin = 1;
      end = data.totalPage;
    }else{
      
      
      //设置开始页为当前页-5   最后页为当前页+4     减的数字为显示几页/2向下取整   加的数字为减的数字减1(奇数)
      //                                       减的数字为显示几页/2         加的数字为减的数字减1(偶数)
      begin = data.currentPage - 5;
      end = data.currentPage + 4;
      if(begin<1){
      
      
        begin = 1;
        end = begin+9;
      }
      if(end>data.totalPage){
      
      
        end = data.totalPage;
        begin = end-9;
      }      
    }
    
    //遍历显示根据begin和end 所显示的数字
    for (var i = begin; i <= end ; i++) {
      
      
         if (data.currentPage==i){
      
        //如果是当前页的话，加了一个样式
             li = '<li class="curPage" οnclick="javascript:pageQuery('+dataId+','+i+',\''+dataName+'\')"><a href="javascript:void(0)">'+i+'</a></li>';
         }else {
      
      
             li = '<li οnclick="javascript:pageQuery('+dataId+','+i+',\''+dataName+'\')"><a href="javascript:void(0)">'+i+'</a></li>';
                    }
          lis+=li;
                }
    
    var nextPage = currentPage+1;
    if(nextPage>data.totalPage){
      
      
      netxPage = data.totalPage;
    }
    var lastPage = data.totalPage;
    var nextli = '<li οnclick="javascript:pageQuery('+dataId+','+nextPage+',\''+dataName+'\')"class="threeword"><a href="javascript:void(0);">下一页</a></li>';
    var lastli = '<li οnclick="javascript:pageQuery('+dataId+','+data.totalPage+',\''+dataName+'\')"class="threeword"><a href="javascript:void(0);">末页</a></li>';
    lis+=nextli;
    lis+=lastli;
    
    //设置分页内容
    $("#pageNum").html(lis);
  });
}

分页效果如下：
在这里插入图片描述

补充：点击页码到顶部：

//定位到0,0点
window.scrollTo(0,0);

Web网页的分页（一）

分页的基本实现：

猜你喜欢