如何使用angularjs开发表格的分页功能？

1.分页功能怎么做

数据量大于预计展示个数时，分段展示数据。

2.两个重要参数：pageSize，pageNo

常量pageSize，变量pageNo。

3.选择分页方式

①前端缓存所有数据，根据pageNo变化
②node端开放query params，根据pageNo和pageSize参数分页

4.列举两种技术难点

前端分页：

① 切分数据
显示前十个数据：取数组索引0~9的。
pageNo：1，pageSize：10.
显示第二组数据，取数组索引10~20的。
pageNo：2，pageSize： 10.
②如何根据数组长度生成页码
③如何监听到页码被点击，从而切换数据
④如何在angular中取实现

后端分页：

①切分数据思路一致
②如何通过express开放带查询参数的接口
③如何根据请求参数查询数据库

先来尝试第一种思路：

1.定义3个重要参数✔️

    $scope.paginationConfig = {
        total: [],
        pageSize: 5,
        pageNo: 1
    }

2.取第1个3个的数据，取第2个3个的数据。 ✔️pag algorithm

    function controlPagArr (data,pageSize,pageNo){
        var arr = data;
        var index = pageSize * (pageNo -1);
        var length = pageSize;
        return arr.splice(index,length);
     }

3.根据实际情况计算分页的面板。✔️Math.ceil()

     function calculatePagItem(data,pageSize){
        var arr = data;
        var total = arr.length;
        var num = Math.ceil(total/pageSize); 
        return num;
     }

4.监听页码被点击，切换数据。✔️angular.$watch()

    $scope.$watch('paginationConfig.pageNo',function(newValue,oldValue){
        console.log(newValue,oldValue);
        if(newValue != oldValue){
            appFilterByTagSearch();
        }
    })

5.点击箭头跳转分页。✔️ pageNo>1 && pageNo<total

   $scope.pagNoChange = function(item){
       console.log(item)
       $scope.paginationConfig.pageNo = item;
   }
   $scope.moveBackward = function(){
       if($scope.paginationConfig.pageNo > 1){
           $scope.paginationConfig.pageNo --;                    
       }
   }
   $scope.moveForward = function(){
       if($scope.paginationConfig.pageNo<$scope.paginationConfig.total.length){
           $scope.paginationConfig.pageNo ++;                    
       }
   }

前端分页已完成！
注：其中appFilterByTagSearch是从后端获取数据的方法。

    function appFilterByTagSearch() {
        if ($scope.tagCountList.length > 0) {
            $scope.tablelist = _.filter($scope.finalApplist, function(item) {
                var tagIds = _.map(item.tags, 'id');
                return tagIds.some(function(id) {
                    return $scope.tagCountList.indexOf(id) > -1;
                });
            });
            $scope.paginationConfig.total = [];            
            for(var i = 0;i<calculatePagItem($scope.tablelist,$scope.paginationConfig.pageSize) ;i++){
                $scope.paginationConfig.total.push(i+1);
            }
            $scope.tablelist = controlPagArr($scope.tablelist,$scope.paginationConfig.pageSize,$scope.paginationConfig.pageNo)

        } else {
            $scope.tablelist = $scope.finalApplist;
            $scope.paginationConfig.total = [];            
            for(var j = 0;j<calculatePagItem($scope.tablelist,$scope.paginationConfig.pageSize) ;j++){               
                $scope.paginationConfig.total.push(j+1);
            }
            $scope.tablelist = controlPagArr($scope.tablelist,$scope.paginationConfig.pageSize,$scope.paginationConfig.pageNo)  
        }
    }