angular.js 分页代码

之前写过多个分页程序,有ASP版本的,PHP版本的。现在在学习angular,使用angularjs 分页,基于 directive 实现,样式使用的 bootstrap,直接在 html代码中加入 标签即可调用。
完美的ASP分页脚本(http://www.miaoqiyuan.cn/p/asp-pageination)
PHP分页(页码)函数(http://www.miaoqiyuan.cn/p/php-yema-fenye)
分享两个ASP分页(页码)函数(http://www.miaoqiyuan.cn/p/asp-yema-fenye)

代码已经发布到了git@OSC(https://git.oschina.net/mqycn/ng-pagination), 演示地址:http://www.miaoqiyuan.cn/products/ng-pagination/

app.directive('pagePagination', function(){
    return {
        restrict : 'E',
        template : '<div class="pagination-box"><ul class="pagination"><li ng-class="page.style" ng-repeat="page in pageList"><a href="{{ page.link }}">{{ page.name }}</a></li></ul><ul class="pagination" ng-if="pageList[0]"><li class="page-count disabled"><span>共 <b>{{ pageRecord }}</b> 条记录 / 共 <b>{{ pageCount }}</b> 页</span></li></ul></div>',
        replace : true,
        scope : {
            "pageId"            : "=",
            "pageRecord"        : "=",
            "pageSize"          : "=",
            "pageUrlTemplate"   : "="
        },
        controller : ['$scope', function($scope){
             
            $scope.getLink = function(pageId){
                return $scope.pageUrlTemplate.replace("{PAGE}", pageId);
            };
 
            $scope.getPageList = function(){
                var page = [];
                var firstPage = parseInt(( $scope.pageId - 1 ) / $scope._pageSize ) * $scope._pageSize + 1;
                page.push({
                    name    : '首页',
                    style   : $scope.pageId == 1 ? "disabled" : "",
                    link    : $scope.getLink(1)
                });
                page.push({
                    name    : '上一页',
                    style   : $scope.pageId == 1 ? "disabled" : "",
                    link    : $scope.getLink($scope.pageId - 1)
                });
                for( var pageId = firstPage; pageId < firstPage + 10; pageId ++){
                    if( pageId >= 1 && pageId <= $scope.pageCount ){
                        page.push({
                            name    : pageId,
                            link    : $scope.getLink(pageId),
                            style   : pageId == $scope.pageId ? "active" : ""
                        });
                    }
                }
                page.push({
                    name    : '下一页',
                    style   : $scope.pageId == $scope.pageCount ? "disabled" : "",
                    link    : $scope.getLink($scope.pageId + 1)
                });
                page.push({
                    name    : '尾页',
                    style   : $scope.pageId == $scope.pageCount ? "disabled" : "",
                    link    : $scope.getLink($scope.pageCount)
                });
                return page;
            };

            $scope.$watch('pageId', function(){
                if( !!$scope.pageId ){
                    if( !!$scope.pageSize ){
                        $scope._pageSize = parseInt($scope.pageSize);
                    }else{
                        $scope._pageSize = 10;
                    }
                    $scope.pageId       = parseInt($scope.pageId);
                    $scope.pageCount    = parseInt(( $scope.pageRecord - 1 ) / $scope._pageSize ) + 1;
                    if( $scope.pageId < 1 ){
                        $scope.pageId = 1;
                    }else if( $scope.pageId > $scope.pageCount ){
                        $scope.pageId = $scope.pageCount;
                    }
                    $scope.pageLoad     = true;
                    $scope.pageList     = $scope.getPageList();
                }
            });
            $scope.pageLoad = false;
        }]
    }
});

调用代码:

&lt;page-pagination
    page-id="pageId"
    page-record="recordCount"
    page-url-template="urlTemplate"&gt;
&lt;/page-pagination&gt;

ng-pagination

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.