json+ajax+pagehelper分页：

 

 

配置文件：

 

在Springboot中需要开启pagehelper,要配置两个文件。
POM文件：


    com.github.pagehelper
    pagehelper-spring-boot-starter
    1.1.1


    com.github.pagehelper
    pagehelper-spring-boot-autoconfigure
    1.2.3


application.properties文件：
#pageHelper 配置参数
pagehelper.helperDialect=mysql
pagehelper.reasonable=false
pagehelper.supportMethodsArguments=false
pagehelper.offsetAsPageNum=true
pagehelper.rowBoundsWithCount=true
pagehelper.pageSizeZero=true

前台js代码:

js代码中全局变量:

//把集合抽出来当做公共数据
var pageinfo = [];
pageinfo.push({page:"1",size:"3"});
var ajaxurl ="${pageContext.request.contextPath}/*********/recordlist";

页面加载成功，运行函数

//初始化完成页面加载数据
function Filter(pageinfo) {
    console.log("已加载的Filter函数的pageinfo数据为：",pageinfo);
    ajaxss(pageinfo);
}

单独抽出的ajax函数，利用append函数对特定div进行填充内容

function ajaxss(pageinfo1){
    $.ajax({
        type:"POST",
        dataType:"json",
        url:ajaxurl,   //回发到的页面
        data:JSON.stringify(pageinfo1),
        contentType:"application/json",
        async:true,
        success: function(data) {
            console.log("请求返回的数据changePageSize为：",data);
            var endorsesdata = data;
            $("#pagejson").empty();   //清空div中内容
            $("#startpageend").empty();   //清空div中内容
            var o1 = JSON.stringify(data);//转换为json字符串
            var o = JSON.parse(o1);//转换为对象
            console.log(o.total);
            var pagejson =""+ "共计" + o.total +"一共"+ o.pages+"页"+"";
            $("#pagejson").append(pagejson);
            $("#startpageend").append('
上一页
');
            for(var i = 1;i<=o.pages;i++){
                var innerpage = "
" + "" + i + "" + "
";
                $("#startpageend").append('
 '+ i+'  
');
            }

            $("#startpageend").append('
下一页
');
            $("#ajaxtable").empty();   //清空div中内容  index起始位置   content当前的元素
            $.each(endorsesdata.list,function(index,content){
                var trDom = "" +
                    //    
                    '' +
                    "" + content.id + "" +
                    "" + content.spend + "" +
                    "" + content.datetime + "" +
                    "" + content.type + "" +
                    "";
                $("#ajaxtable").append(trDom);
            });

        },
        error:function(){
            $("#endorses").empty();   //清空div中内容
            $("#endorses").append('
No Contents');
        }
    });

}

下一页函数

//下一页
function npage(){
    //获取下拉框的值
    var total = document.getElementById('endpage').valueOf();
    var totals = parseInt(total);
    var j = parseInt(pageinfo[0].page)+1;
    if(j>totals){
        pageinfo[0].page = total;
    }else{
        pageinfo[0].page = j.toString();
        console.log("当前page值为===============================================",parseInt(pageinfo[0].page));
    }
    ajaxss(pageinfo);
}

上一页函数

//上一页
function startpage() {
    //获取下拉框的值
    var pageSize = $("#changePageSize").find("option:selected").val();
    var pageinfo1 = new Array();
    console.log("pageinfo[0].page",pageinfo[0].page-1);

    var j = pageinfo[0].page - 1;

    if(j<=0){
        pageinfo1.push({page:1,size:pageSize});
        pageinfo[0].page = 1;
        console.log("当前page值为===============================================",pageinfo[0].page);
    }else{
        pageinfo1.push({page:j,size:pageSize});
        pageinfo[0].page = j;
        console.log("当前page值为===============================================",pageinfo[0].page);
    }
    ajaxss(pageinfo1);
}

 

跳转特定页面函数

 

后台代码：使用fastjson在POM文件配置依赖

@RequestMapping(value="/******")
@ResponseBody
    public String recordlists(@RequestBody List> listMap) throws Exception{
    String jsonpage = listMap.get(0).get("page");
    String jsonsize = listMap.get(0).get("size");
     int page = Integer.parseInt(jsonpage);
    int size = Integer.parseInt(jsonsize);
    //修改实体为Recordto
    List recordlist = recordhutuService.recordlists(page,size);
    //pageinfo就是一个分页bean
    PageInfo pageInfo = new PageInfo(recordlist);
    return  JSON.toJSONString(pageInfo);
}