码迷,mamicode.com
首页 > 其他好文 > 详细

AJAX实现分页--模拟百度搜索分页

时间:2014-09-24 21:46:07      阅读:262      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   color   io   os   使用   java   

第一部分:效果与分析

1.百度分页组件:

bubuko.com,布布扣

 2.自己实现的分页:

bubuko.com,布布扣

3.分析:

  百度搜索分页,如果总页数大于10,用户最多只能看到10页内容,不足10页显示全部,当点击下一页时,数字页标向前移动一个单位,当点击上一页时向后移动一个单位。

第二部分:后台实现:

1.实现思路:

  后台的处理思想是这样的,通过AJAX向后台发送请求,携带一个分页对象PageBean传过去,查询完毕后返回一个新的PageBean对象。

前台传入的PageBean对象参数:

属性 名称 是否必须 默认值
pageSize 每页数据量 非必须 30
currentPage 当前页【用户要取的页】 必须 1
key 关键词 非必须  null

后台处理后获得的PageBean对象:

属性 名称 是否必须 默认值
pageSize 每页数据量    
currentPage 当前页【用户要取的页】    
key 关键词    
totalRows 总行数    
totalPages 总页数    
data 数据    

请求参数Demo:{pageSize:10,currentPage:1},获取第一页数据,每页10条。

获取数据Demo:{}。

2.后台处理方法,JAVA实现,此方法传入PageBean对象,获取数据后返回PageBaen对象,前台AJAX请求需要经过中间的控制器来调用此方法,并将数据转换为JSON对象。控制器可用Servlet/Struts/SpringMVC等实现。


/**
* 分页方法
* @param @param page (传入分页对象),传入每页大小pageSize和需要第几页currentPage
* @param @return
* @return PageBean
* @throws
**/

public PageBean findByPage(PageBean page) {

// TODO Auto-generated method stub
        int pageSize = page.getPaseSize()!=0?page.getPaseSize():30; //每页数据条数;
        int currentPage = page.getCurrentPage()>0?page.getCurrentPage():1;//当前第几页
        int totalRows = 0; //总的记录数
        int totalPages = 0 ;//总的页数
        List<Map<String, Object>> datas = null;
        //查询条件,通过map的方式传入
        Map<String, Object> map = new HashMap<String, Object>();
        //获取总的记录数
        int _totalRows = getSqlSession().selectOne(getMapperFullName("findTotalRows"),map);
        if(_totalRows==0){
            //没有数据
            return null;
        }else{
            totalRows = _totalRows;
        }
        //计算总的页数
        if(_totalRows%pageSize==0){
            totalPages = _totalRows/pageSize;
        }else{
            totalPages = _totalRows/pageSize+1;
        }
        //判断当前页是否大于总的页数,如果大于则返回最后一页数据
        int start = 0;
        int limit = pageSize;
        //当请求的页数大于总页数时,返回最后一页数据
        if(currentPage>totalPages){
            start = (totalPages-1)*pageSize;
        }else{
            start = (currentPage-1)*pageSize;
        }
        map.put("start", start);
        map.put("limit", limit);
        datas = getSqlSession().selectList(getMapperFullName("find"), map);
        //查询完毕,设置数据并返回结果
        page.setCurrentPage(currentPage>totalPages?totalPages:currentPage);
        page.setData(datas);
        page.setPaseSize(pageSize);
        page.setTotalPages(totalPages);
        page.setTotalRows(totalRows);
        return page;
    }

3.PageBean.java

public class PageBean {

    protected int paseSize; //每页数据量

    protected int currentPage; //当前页
+
    protected int totalRows; //总记录书

    protected int totalPages; //总页数

    private List<?> data; //数据
    
    public PageBean() {}
}

 4.Spring控制器:

    @ResponseBody  //此注解自动会将page转为JSON
    @RequestMapping("page")
    public PageBean findByPage(HttpServletRequest request,HttpServletResponse response,PageBean page){
        return this.userService.findByPage(page);
    }

第二部分:前台实现,使用html和js

1.index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> base page </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript" src="jquery-1.7.2.js"></script>
  <script type="text/javascript" src="jquery.tmpl.js"></script>
  <script type="text/javascript" src="basepage.js"></script>
  <style type="text/css">
      .box{
          width: 750px;
          margin: 0 auto;
      }
      .page{
          padding: 10px 0px 10px 5px;
          margin:5px 0px;
          width: 100%;
      }
      /*分页链接的样式*/
      .page-a{
          color: blue;
          text-decoration: none;
          border:1px solid #CCC;
          padding:5px 5px;
      }
      .page-a:HOVER {
        border: 1px #0099cc solid;
    }
    /**当前页的文本样式**/
    .page-curr-text{
        color: black;
        font-weight: bold;
    }
  </style>
 </head>
 <body>
 <div class="box">
   <!--数据-->
  <table id="tab" border="0" style="width:100%;border: 1px solid #CCC;" cellpadding="5" cellspacing="1" bgcolor="#CCCCCC">
  </table>
   <!--分页组件-->
  <div class="page"></div>
 </div>
   <!--数据模版-->
<script id="tmpl" type="text/x-jquery-tmpl">
    <tr bgcolor="#FFFFFF">
        <td>${id}</td>
        <td>${name}</td>
        <td>${sex}</td>
        <td>${birthday}</td>
    </tr>
</script>
 </body>
</html>

2.basepage.js

/**AJAX分页获取数据**/
function getData(_currentPage){
    $.ajax({
        url:‘http://localhost:8089/user/action/page‘,
        type:‘post‘,
        dataType:‘jsonp‘,
        contentType: ‘application/json;charset=utf-8‘,
        data:{currentPage:_currentPage,paseSize:5},
        error:function(){
            alert("request error!");
        },
        success:function(json){

            /**设置数据**/
            var data = json.data;
            /**使用jQuery模版
            $("#tab").html($("#tmpl").tmpl(data));
            
            /**生成一个分页工具栏组件**/
            var tools = ""; //定义分页html
            //json数据
            var toolsData = {currentPageX:json.currentPage,paseSizeX:json.paseSize,totalPagesX:json.totalPages,totalRowsX:json.totalRows};
            //共几页
            var totlaBar ="<a class=‘‘>共"+toolsData.totalPagesX+"页</a>&nbsp;";
            //首页
            var first ="<a class=‘page-a‘ href=‘javascript:void(0);‘ onclick=‘getData(1)‘>首页</a>&nbsp;";
            //上一页
            var prev ="<a class=‘page-a‘ href=‘javascript:void(0);‘ onclick=‘getData("+(toolsData.currentPageX-1)+")‘>&lt;上一页</a>&nbsp;";
            //中间带数字的页
            var page = "";
            var t = 10;  //用户最多看到10页
            var c = toolsData.currentPageX; //当前第几页
            //总页数小于10显示全部
            if(toolsData.totalPagesX<=10){
                for(var i=1;i<toolsData.totalPagesX+1;i++){
                    page = page + addPage(c,i);
                }    
            }else{
                //总页数大于10
                if(c<=6){
                    for(var i=1;i<c+1;i++){
                        page = page + addPage(c,i);
                    }
                    for(var i=c+1;i<c+(t-c)+1;i++){
                        page = page + addPage(c,i);
                    }
                }else if(c>6 && c<=toolsData.totalPagesX-5){
                    for(var i=c-5;i<c+1;i++){
                        page = page + addPage(c,i);
                    }
                    for(var i=c+1;i<c+5;i++){
                        page = page + addPage(c,i);
                    }
                }else{
                    for(var i=c-(t-(toolsData.totalPagesX-c)-1);i<c;i++){
                        page = page + addPage(c,i);
                    }
                    for(var i=c;i<toolsData.totalPagesX+1;i++){
                        page = page + addPage(c,i);
                    }
                }
            }
            //下一页
            var next ="<a class=‘page-a‘ href=‘javascript:void(0);‘ onclick=‘getData("+(toolsData.currentPageX+1)+")‘>下一页&gt;</a>&nbsp;";
            //尾页
            var last ="<a class=‘page-a‘ href=‘javascript:void(0);‘ onclick=‘getData("+(toolsData.totalPagesX)+")‘>尾页</a>&nbsp;";
            
            if(toolsData.currentPageX==1){
                tools =totlaBar+page+next+last;
            }else if(toolsData.currentPageX>1 && toolsData.currentPageX<toolsData.totalPagesX){
                tools = totlaBar+first+prev+page+next+last;
            }else if(toolsData.currentPageX=toolsData.totalPagesX){
                tools = totlaBar+first+prev+page;
            }
            //设置分页工具栏到
            $(".page").html(tools);
        }
    });
    function addPage(index,i){
        var page = "";
        if(index==i){
            page = "<span class=‘page-curr-text‘>"+i+"</span>&nbsp;";
        }else{
            page = "<a class=‘page-a‘ href=‘javascript:void(0);‘ onclick=‘getData("+i+");‘>"+i+"</a>&nbsp;";
        }
        return page;
    }
};


//测试
$(function(){
   getData(1);
});

至此搞定...


 

AJAX实现分页--模拟百度搜索分页

标签:des   style   blog   http   color   io   os   使用   java   

原文地址:http://www.cnblogs.com/zhougaojun/p/3981203.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!