web前端设置分页label

一.思路分析

一般做数据表的分页  前后端的交互数据

  请求携带的数据 pageNum(当前页)   pageSize(每页的记录数)

   后端给前端的数据

   page.getContent()    就是当前页的数据列表

    totals : 总记录数

    totalPages : 总页数

二. 环境材料设置

一般后端根据pageNum和pageSize向后端数据库查询数据

今天我要做的案例是同步数据库某表的solr索引库做分页后端数据的查询

现在就是简单的一个分页查询, 不做其他条件的添加

1.后端代码

    private Map queryPage(Map searchMap){

        Query query =new SimpleQuery("*:*");

        Map map = new HashMap();

        Integer pageNum = (Integer) searchMap.get("pageNum");//获取当前页码

        if(pageNum==null){

            pageNum=1;//前端没有给数据我自己设置

        }

        Integer pageSize = (Integer) searchMap.get("pageSize");//获取每页记录数

        if(pageSize==null){

            pageSize=20;//前端没有给数据我自己设置

        }

        //设置分页

        query.setOffset((pageNum-1)*pageSize);//设置从哪个索引查询

        query.setRows(pageSize);//每页显示的记录数

        HighlightPage page =solrTemplate.queryForPage(query, TbItem.class);

        return map.put("pageList",page.getContent())

     }

2.前端代码:

angularJS代码:

    //定义循环产生页码标签

$scope.buildPageTable =function(){

//1.对于循环产生页码标签,我们只让显示5个

    var maxPageNo= $scope.resultMap.totalPages;//得到最后页码

    var firstPage=1;//开始页码

    var lastPage=maxPageNo;//截止页码

    //2.为了是否显示省略号 创建两个变量

    $scope.firstDot=true;//前面有点

    $scope.lastDot=true;//后边有点

    if($scope.resultMap.totalPages>5){//如果总页数大于5页,显示部分页码

        if($scope.searchMap.pageNum<=3){

            lastPage=5;

            $scope.firstDot=false;//让前页码的点消除

        }else if($scope.searchMap.pageNum>=lastPage-2){

            firstPage=maxPageNo-4;

            $scope.lastDot=false;//让后面页码的点消除

        }else {

        firstPage=$scope.searchMap.pageNum-2;

        lastPage=$scope.searchMap.pageNum+2;

}

}else{

//如果总页数小于=5, 显示所有页码. 前后省略号都消除

        $scope.firstDot=false;

        $scope.lastDot=false;

}

//定义一个数组, 用来装每个页码数,在前端页面循环

    $scope.pageLable = [];

    for (var i=firstPage;i<=lastPage;i++){

        $scope.pageLable.push(i);

    }

}

//定义根据页码查询方法

$scope.queryByPage =function (pageNum) {

    if(pageNum<0 || pageNum>$scope.resultMap.totalPages){

    return ;

    }

    //将传入的pageNum参数赋值给$scope.searchMap.pageNum

    $scope.searchMap.pageNum=pageNum;

    $scope.search();

}

//3.对页码(上一页和下一页)不可用样式的判断

$scope.isTopPage=function () {

    if($scope.searchMap.pageNum==1){

        return true;//不可用

    }else{

        return false;//可用

    }

}

$scope.isEndPage=function () {

if($scope.searchMap.pageNum==$scope.resultMap.totalPages){

        return true;//不可用

    }else{

        return false;//可用

    }

}