Data show distal tab angulatJs - Example

Note: css using a amazeui

 

html:

···
<div style="height:500px;overflow: auto;">
    <table class="am-table" style="width:100%;padding: 10px 30px ">
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>电话</td>
            <td>年龄</td>
        </tr>
        <tr ng-repeat="items in list" class="gradeX">
            <td>{{$index+1}}</td>
            <td>{{items.name}}</td>
            <td>{{items.tel}}</td>
            <td>{{items.age}}</td>
        </tr>
    </table>
</div>
<ul class="am-pagination am-pagination-right">
    <li ng-class="{true:'am-disabled'}[ 1 == currentPage]"><a href ng-click="firstPage()">首页</a></li>
    <li ng-class="{true:'am-disabled'}[ 1 == currentPage]"><a href ng-click="prevPage()">上一页</a></li>
    <li ng-class="pageTool_fun({{n}},'1')" ng-repeat="n in pageToolCursor"><a id="{{n}}" href ng-click="gotoXpage(n)">{{n}}</a></li>
    <li><a>共{{itemsPerPage}}页 ({{totalRow}}条数据)</a></li>
    <li ng-class="{true:'am-disabled'}[ (currentPage) == itemsPerPage]"><a href ng-click="nextPage()">后一页</a></li>
    <li ng-class="{true:'am-disabled'}[ (currentPage) == itemsPerPage]"><a href ng-click="lastPage()">尾页</a></li>
</ul>
···

 

js:

????? 
var reqURL = '***';
 var dataobj = {   // the request for personal data in the background, modified according to the situation
     'the pageNumber':. 1 ,
     'the pageSize': 10 ,
     'ID': '' 
} 

$ scope. List = []; 
$ scope.currentPage =. 1 ; // this page 
$ scope.totalRow = 0 ; // total number of pieces 
$ scope.itemsPerPage = 0 ; // total number of pages 
$ scope.pageToolCursor = []; // taken page 

// Home 
$ scope.firstPage = function () { 
    dataObj.pageNumber =. 1 ; 
    $ HTTP ({
            method: 'get',
            params: {
                param: $.toJSON(dataObj) //针对个人用params传参
            },
            data: {},
            url: reqUrl
        })
        .success(function(response, status, headers, config) {
            var rstate = response.result;
            if (rstate == '0') {
                var _data = response.message;
                $scope.list = _data.list;
                $scope.currentPage = _data.pageNumber;
                scope.totalRow $ =_data.totalRow; 
                $ scope.itemsPerPage = _data.itemsPerPage;
                 // initialize the page index, only the leading up to 9 
                var itemsNum =. 9 ;
                 IF ($ scope.itemsPerPage <. 9 ) { 
                    itemsNum = $ scope. itemsPerPage; 
                } 
                for (I =. 1; I <= itemsNum; I ++ ) { 
                    $ scope.pageToolCursor.push (I); 
                } 
            } the else { 
                Alert ( "data acquisition failure! ' ); 
            } 
        }) 
        .error ( function(response, status, headers, config) {
            alert('获取数据失败..');
        });
}

//上一页
$scope.prevPage = function() {
    if (!($scope.currentPage == 1)) {
        var reqpages = $scope.currentPage - 1;
        dataObj.pageNumber = reqpages;
        $http({
                method: 'get',
                params: {
                    param: $.toJSON(dataObj)
                },
                data: {},
                url: reqUrl
            })
            .success(function(response, status, headers, config) {
                var rstate = response.result;
                if (rstate == "0") {
                    var _data = response.message;
                    $scope.list = _data.list;
                    $scope.currentPage = _data.pageNumber;
                    $scope.totalRow = _data.totalRow;
                    $scope.itemsPerPage = _data.itemsPerPage;

                    var pageToolCursor = $scope.pageToolCursor;
                    if ($scope.currentPage <= pageToolCursor[0]) {
                        if (pageToolCursor[0] == 1) {return;
                        }
                        var arrayObj = new Array();
                        if ($scope.currentPage < 9) {
                            $scope.pageToolCursor = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];

                        } else {
                            for (i = $scope.currentPage; i > $scope.currentPage - 9; i--) {
                                arrayObj.unshift(i);
                            }
                            $scope.pageToolCursor arrayObj;= 
                        } 
                    } 
                } the else { 
                    Alert ( "Get data failed!" ); 
                } 
            .}) Error ( function (Response, Status, headers, config) { 
                Alert ( "data acquisition failure .. ' ); 
            }) ; 
    } 
}; 

// Next 
$ scope.nextPage = function () {
     IF ((scope.currentPage == $! {$ scope.itemsPerPage))
         var reqpages scope.currentPage = $ +. 1 ; 
        dataObj.pageNumber = reqpages;
        $http({
                method: 'get',
                params: {
                    param: $.toJSON(dataObj)
                },
                data: {},
                url: reqUrl
            })
            .success(function(response, status, headers, config) {
                var rstate = response.result;
                if (rstate == "0") {
                    var _data = response.message;
                    $scope.list = _data.list;
                    $scope.currentPage = _data.pageNumber;
                    $scope.totalRow = _data.totalRow;
                    $scope.itemsPerPage = _data.itemsPerPage;

                    var pageToolCursor = $scope.pageToolCursor;if ($scope.currentPage >= pageToolCursor[pageToolCursor.length - 1]) {
                        if (pageToolCursor[pageToolCursor.length - 1] == $scope.itemsPerPage) {
                            return;
                        }
                        var arrayObj = new Array();
                        var enditems = 0;
                        var compareNUm = $scope.itemsPerPage - pageToolCursor[pageToolCursor.length - 1];
                        if (compareNUm < 9 && compareNUm > 0) {
                            enditems = $scope.itemsPerPage - pageToolCursor[pageToolCursor.length - 1];
                            for (i = $scope.currentPage + enditems; i > $scope.currentPage + enditems - 9; i--) {
                                arrayObj.unshift(i);
                            }
                        } else {
                            enditems =. 9 ;
                            for (I $ = scope.currentPage; I <$ scope.currentPage + enditems; I ++ ) { 
                                arrayObj.push (I); 
                            } 
                        } 
                        $ scope.pageToolCursor = arrayObj; 
                    } 
                } the else { 
                    Alert ( "data acquisition failure ! " ); 
                } 
            }) 
            .error ( function (Response, Status, headers, config) { 
                Alert ( " data acquisition failure .. ' ); 
            }); 
    } 

}; 


// End 
$ scope.lastPage =function() {
    if ($scope.currentPage == $scope.itemsPerPage) {
        return;
    }
    var reqpages = $scope.itemsPerPage;
    dataObj.pageNumber = reqpages;
    $http({
            method: 'get',
            params: {
                param: $.toJSON(dataObj)
            },
            data: {},
            url: reqUrl
        })
        .success(function(response, status, headers, config) {
            var rstate = response.result;
            if (rstate == "0") {
                var _data = response.message;
                $scope.list = _data.list;
                $scope.currentPage = _data.pageNumber;
                $scope.totalRow = _data.totalRow;
                $scope.itemsPerPage = _data.itemsPerPage;
                var arrayObj = new Array();
                if ($scope.itemsPerPage > 9) {
                    for(I $ = scope.itemsPerPage; I> $ scope.itemsPerPage -. 9; i-- ;) {
                        arrayObj.unshift(i);
                    } 
                    $ Scope.pageToolCursor = arrayObj; 
                } 
            } the else { 
                Alert ( "Get data failed!" ); 
            } 
        }) 
        .Error ( function (Response, Status, headers, config) { 
            Alert ( "data acquisition failure .. ' ); 
        }); 
}; 

// page number into the page corresponding to 
$ scope.gotoXpage = function (X) {
     IF (X> $ scope.itemsPerPage) {
         return 
    } 
    var reqpages = X;
    dataObj.pageNumber = reqpages;
    $http({
            method: 'get',
            params: {
                param: $.toJSON(dataObj)
            },
            data: {},
            url: reqUrl
        })
        .success(function(response, status, headers, config) {
            var rstate = response.result;
            if (rstate == "0") {
                var _data = response.message;
                $scope.list = _data.list;
                scope.currentPage $=_data.pageNumber; 
                $ scope.totalRow = _data.totalRow; 
                $ scope.itemsPerPage = _data.itemsPerPage; 
            } the else { 
                Alert ( "Get data failed!" ); 
            } 
        }) 
        .error ( function (Response, Status, headers, config ) { 
            Alert ( "data acquisition failure .. ' ); 
        }); 

}; 
// set the page number - this page is highlighted   
$ scope.pageTool = function (n-) {
     var The currentPage = $ scope.currentPage;
     var returStr =" ";
    if (n == currentPage) {
        returStr = "am-active";
    }
    if (n > $scope.itemsPerPage) {
        returStr = "am-disabled";
    }
    return returStr;
};
···