使用jquery-pagination实现Ajax分页

在项目开发中，我们经常会使用到分页。

可能在后端开发中，已经有封装的分页，我们不需要去涉及太多。

但是如果在前端展示呢，需要简单而方便的分页操作。

首先，在页面中，需要的是在页面加载的时候异步加载分页的数据，接下来请看步骤：

1：html准备工作

<!--这是配置要存放数据的div，有的时候是用ul-->
<div id="showPage">
 </div>
<!--这是配置分页器，下面会进行初始化-->
<span id="Pagination" style="color: red;float: right;"></span>

2：js部分

<script type="text/javascript">

    var pageSize =5;// 定义每页显示多少
      var count;    
      $(document).ready(function(){
           load();
});

function load(){
        if(${total}<=pageSize){//当前只有一页
            ajaxLoad(0);
        }else{
             pageselectCallback(0);//多页，默认从第一页加载
            function pageselectCallback(pageIndex) {//该index是点击会传过来的数据
                ajaxLoad(pageIndex);
               return false;// false则不刷新页面到#
            }
        }
        //分页显示器初始化，以及配置
        $("#Pagination").pagination(count, { // count通过从数据库查询记录进行赋值，返回记录的总数
        callback : pageselectCallback, // 点击分页时，调用的回调函数
        prev_text : '上一页', // 自定义，显示上一页按钮的文本
        next_text : '下一页 ', // 自定义，显示下一页按钮的文本
        items_per_page : pageSize, // 每页显示的项数
        num_display_entries : 6, // 分页插件中间显示的按钮数目
        current_page : 0, // 当前页索引
        num_edge_entries : 2 // 分页插件左右两边显示的按钮数目  
        });
}

//加载方法
function ajaxLoad(pageIndex){
 var html = "";
// 初始化加载
        $.ajax({
            type : "POST",
            async : false,
            url :"**",//控制器的地址
            data : {
                pageIndex : pageIndex, //必须的参数，当前页
                pageSize : pageSize     //必须的参数，当前显示的数据量
            },// 传递页面索引
            dataType : "json",
            success : function(data, textStatus) {
                count = data.totalRows;// 给必须count变量赋值
                var action = "<%=path%>";
                var items = data.results;// json返回结果集

                //以下是将数据显示到div中

                $.each(items, function(i, item) {
                   var des;
                     html+="<div class='*'>";
                     html+="<img src="+item.IMAGE+" ></div>";
                     html+="<p class='*'>"+item.TITLE+"</p>";
                     html+="<p class='*'><span class='*'>"+des+"</span>";
                     html+="<a href="+action+"/info/"+item.INDUSTRY_INFORMATION_ID+".html"+">[查看全文]</a></p>";
                     html+="<div class='*'>";
                     html+="<i class='*'>"+item.CREATE_TIME+"</i></div>";
                });
                  document.getElementById("showPage").innerHTML ="";   //html要显示的div先清空,下一次分页显示的时候会把上一次的数据清空,否则会出现叠加
                  var oDiv = document.createElement('div');             //创建临时div，以为上面的操作会将div也清空
                  oDiv.innerHTML = html;                                          //将后台取出来的数据存放到临时的div中
                  document.getElementById("showPage").appendChild(oDiv);   //将数据存放在showPage下面
             },  
             error : function() {  
                
            }  
        });
}
 
</script>

 

3：控制器，这边使用的是springmvc

   

@RequestMapping(value="/*.html")
    @ResponseBody
    public void getPage(HttpServletResponse response){
        Map<String,Object> map=new HashMap<String, Object>();
        PageData pd = new PageData();
        try{
            pd = this.getPageData();
            int pageNow = Integer.parseInt(pd.getString("pageIndex"));
            int pageSize = Integer.parseInt(pd.getString("pageSize"));
            Integer start=pageNow*pageSize;
            pd.put("start", start);
            pd.put("pageSize", pageSize);    
            List<PageData> list = indexService.findNewsPage(pd);
            List<PageData> totalList=indexService.findNewsPageTotal(pd);
            Long total=(Long) totalList.get(0).get("total");
            response.setHeader("Cache-Control", "no-cache");   
            response.setContentType("text/json;charset=UTF-8");  
            response.setCharacterEncoding("UTF-8");  
            PrintWriter out = response.getWriter();   
            map.put("results", list);
            map.put("totalRows", total);
            JSONObject json=JSONObject.fromObject(map);
            out.print(json);
            out.flush();
            out.close();
        } catch(Exception e){
            logger.error(e.toString(), e);
        }
        
    }

 

4:此时数据加载已经完毕。需要注意的是

初始化页面需要定义每页显示的数据多少，从后台获取数据数量${total}。每次加载完需要为count赋值

如果您有兴趣，欢迎加入it成长之路学习交流群：728603969