angularjs实现的前端分页控件示例

/**

 * angularjs分页控件

 * Created by CHEN on 2016/11/1.

 */

angular.module('myModule', []).directive('myPagination',function() {

  return{

    restrict:'EA',

    replace:true,

    scope: {

      option:'=pageOption'

    },

    template:'

'+

    '

• '+

      '{{p}}'+

      '

'+

    '

    link:function($scope) {

      //容错处理

      if(!$scope.option.curr || isNaN($scope.option.curr) || $scope.option.curr < 1) $scope.option.curr = 1;

      if(!$scope.option.all || isNaN($scope.option.all) || $scope.option.all < 1) $scope.option.all = 1;

      if($scope.option.curr > $scope.option.all) $scope.option.curr = $scope.option.all;

      if(!$scope.option.count || isNaN($scope.option.count) || $scope.option.count < 1) $scope.option.count = 10;

      //得到显示页数的数组

      $scope.page = getRange($scope.option.curr, $scope.option.all, $scope.option.count);

      //绑定点击事件

      $scope.pageClick =function(page) {

        if(page =='«') {

          page = parseInt($scope.option.curr) - 1;

        }elseif(page =='»') {

          page = parseInt($scope.option.curr) + 1;

        }

        if(page < 1) page = 1;

        elseif(page > $scope.option.all) page = $scope.option.all;

        //点击相同的页数 不执行点击事件

        if(page == $scope.option.curr)return;

        if($scope.option.click &&typeof$scope.option.click ==='function') {

          $scope.option.click(page);

          $scope.option.curr = page;

          $scope.page = getRange($scope.option.curr, $scope.option.all, $scope.option.count);

        }

      };

      //返回页数范围（用来遍历）

      functiongetRange(curr, all, count) {

        //计算显示的页数

        curr = parseInt(curr);

        all = parseInt(all);

        count = parseInt(count);

        varfrom = curr - parseInt(count / 2);

        varto = curr + parseInt(count / 2) + (count % 2) - 1;

        //显示的页数容处理

        if(from <= 0) {

          from = 1;

          to = from + count - 1;

          if(to > all) {

            to = all;

          }

        }

        if(to > all) {

          to = all;

          from = to - count + 1;

          if(from <= 0) {

            from = 1;

          }

        }

        varrange = [];

        for(vari = from; i <= to; i++) {

          range.push(i);

        }

        range.push('»');

        range.unshift('«');

        returnrange;

      }

    }

  }

});

  

//引入 'myModele' 模块

varapp = angular.module('app', ['myModule']);

app.contriller('myCtrl',function($scope){

  //设置分页的参数

  $scope.option = {

    curr: 1,//当前页数

    all: 20,//总页数

    count: 10,//最多显示的页数，默认为10

    //点击页数的回调函数，参数page为点击的页数

    click:function(page) {

      console.log(page);

      //这里可以写跳转到某个页面等...

    }

  }

});