关于angularjs读取json文件数据并分页显示html

发布网友发布时间：2022-04-26 01:47

共1个回答

热心网友时间：2022-04-20 17:52

//    第一步，获取JSON数据
$http.get("xxx.json").success(function(data){
    $scope.currentData = data;//定义变量存储获取到的JSON数据;

});
$scope.tableData = []; // 定义表格展示用到的数据;
$scope.currentPage = 1;//定义初始页码;
$scope.pageSize = 5; // 定义每页的数据条数;

// HTML写个表格，这个不难，自己写;
ng-repeat = "tableData" // 表格数据ng-repeat 循环赋值

//  翻页功能

$scope.changePage =  function(type,$scope.currentPage){
        // 清空展示的数据
        $scope.tableData = [];
    // 上一页
    if(type === 'prev'){
        Math.min(1,$scope.currentPage--);//    页码递减
        $scope.currentData.each(function(index,item){
            // 循环读取表格数据，用来赋值给表格展示的数组
            // 如果当前的下标是当前页的范围，那么丢给表格展示数据用到的变量数组
            if($scope.currentPage * $scope.pageSize > index && index >= ($scope.currentPage - 1)*$scope.pageSize){
                $scope.tableData.push(item);
            }
        });
    }
    else{
        // 自己写，同样的逻辑
    }
}

//    进入界面，调用一遍翻页功能，不然没数据。
/**
* 有的地方自己适当改一下，没写的那么标准
*/