Angularjs自定義指令實(shí)現(xiàn)分頁(yè)插件(DEMO)

2019-11-19 15:25:38

字體：大中小

供稿：網(wǎng)友

由于最近的一個(gè)項(xiàng)目使用的是angularjs1.0的版本，涉及到分頁(yè)查詢數(shù)據(jù)的功能，后來自己就用自定義指令實(shí)現(xiàn)了該功能。現(xiàn)在單獨(dú)做了個(gè)簡(jiǎn)易的小demo，主要是為了分享自己寫的分頁(yè)功能。注：本實(shí)例調(diào)用的是真實(shí)接口數(shù)據(jù)。

首先、小demo的目錄結(jié)構(gòu)如下：

一、代碼部分

下面直接把每一個(gè)文件的代碼貼出來，重點(diǎn)是ListCtrl.js和pageDirective.js：

1、index.html

<!DOCTYPE html><html lang="en" ng-app="app" ng-cloak><head>  <meta charset="UTF-8">  <title>Title</title>  <!--<script src="lib/jquery.js"></script>-->  <script src="lib/angular.js"></script>  <script src="lib/angular-ui-router.js"></script>  <style>    * {      margin: 0;      padding: 0;    }    .left-menu {      width: 200px;      float: left;      height: 100%;    }    .left-menu ul {      list-style: none;    }    .left-menu ul li {      height: 40px;      line-height: 40px;      background-color: #777;      color: #ddd;      margin-bottom: 5px;      cursor: pointer;    }    .main {      margin-left: 200px;      padding: 10px;    }    .left-menu ul li.active {      background-color: #333;      color: #fff;    }  </style></head><body>  <div style="width: 100%;height: 50px;background-color: #ddd;">頂部區(qū)域</div>  <div class="left-menu" ng-controller="MenuCtrl">    <ul>      <li ng-click="goState('home')" ng-class="{active:curUrl == '/home'}">首頁(yè)</li>      <li ng-click="goState('list')" ng-class="{active:curUrl == '/list'}">列表</li>    </ul>  </div>  <div class="main" ui-view="main"></div><script src="scripts/app.js"></script><script src="scripts/router.js"></script><script src="scripts/controllers/MenuCtrl.js"></script><script src="scripts/controllers/ListCtrl.js"></script><script src="scripts/controllers/HomeCtrl.js"></script><script src="scripts/directive/pageDirective.js"></script></body></html>

2、views/list.html （重要，列表數(shù)據(jù)的html部分）

<style>  table {    border: 1px solid #000;    border-collapse: collapse;    width: 100%;  }  table th,table td {    border: 1px solid #000;    text-align: center;    height: 30px;  }</style><table>  <thead>  <th>ID</th>  <th>昵稱</th>  <th>創(chuàng)建時(shí)間</th>  </thead>  <tbody>  <tr ng-repeat="item in listData">    <td>{{item.id}}</td>    <td>{{item.nickname}}</td>    <td>{{item.create_time}}</td>  </tr>  </tbody></table><div>  <!--分頁(yè)指令-->  <div page-directive page-config="pageConfig"></div></div>

3、views/home.html

<div>首頁(yè)區(qū)域</div><a ng-href="{{url}}" rel="external nofollow" target="_self">百度</a>

4、views/directive/page-directive.html （重要，自定義指令的html部分）

<style>  .page {font-size: 14px;background-color: transparent;}  .page .page-l select {width: 60px;height: 30px;}  .page .page-r {float: right;padding-top: 10px;}  .page .page-r ul {float: left;list-style: none;margin: 0;height: 30px;box-sizing: border-box;}  .page .page-r ul li {float: left;list-style: none;height: 100%;line-height: 30px;border: 1px solid #ccc;border-right: 0 none;box-sizing: border-box;}  .page .page-r ul li:hover {background-color: #e2e2e2;}  .page .page-r ul li:last-child {border-right: 1px solid #ccc;}  .page .page-r ul li a {text-decoration: none;display: block;height: 100%;padding:0 10px; color: #2A6496;}  .page .page-r ul li a.active {background-color: #428BCA;color: #fff;}  .page .page-r ul li span {display: block;height: 100%;padding:0 10px; color: #2A6496;cursor: pointer;}  .page .page-r ul li span.ellipsis {cursor: default;}</style><div class="page" style="width: 100%;height: 50px;line-height: 50px;">  <div class="page-l" id="page_l" style="float: left;">    <span>總共 <span id="total_count">{{pageConfig.totalCount}}</span> 條</span>    <div style="display: inline-block;margin-left: 20px;">      <span>每頁(yè)顯示</span>      <select id="page_size">        <option value="10">10</option>        <option value="20">20</option>        <option value="50">50</option>        <option value="100">100</option>      </select>條    </div>  </div>  <div class="page-r">    <ul id="page_ul" class="page-ul"></ul>  </div></div>

5、scripts/app.js

angular.module('app', ['ui.router', 'app.C', 'app.S', 'app.D']).constant('global',{  //定義全局變量  url:'http://www.baidu.com'});angular.module('app.C', []);angular.module('app.S', []);angular.module('app.D', []);

6、scripts/router.js （路由配置）

var app = angular.module('app').config(['$stateProvider', '$urlRouterProvider',  function ($stateProvider, $urlRouterProvider) {    $urlRouterProvider.otherwise('/home'); //如果沒有匹配到，則就讓其匹配home    $stateProvider      .state('home',{        url:'/home',        views:{          'main':{            templateUrl:'views/home.html',            controller:'HomeCtrl'          }        }      })      .state('list',{        url:'/list',        views:{          'main':{            templateUrl:'views/list.html',            controller:'ListCtrl'          }        }      })  }]).run(['$rootScope', '$state',  function ($rootScope, $state) {    $rootScope.$on('$stateChangeSuccess',      function(event, toState, toParams, fromState, fromParams) {        console.log($state.current.url);        $rootScope.curUrl = $state.current.url;      })  }])

7、scripts/controllers/MenuCtrl.js

angular.module('app.C').controller('MenuCtrl', ['$scope', '$state',  function ($scope, $state) {    $scope.goState = function (url,params) {      if(!url) {        $state.go('home')      }else{        if(params){          $state.go(url,params)        }else{          $state.go(url)        }      }    }  }])

8、scripts/controllers/HomeCtrl.js

angular.module('app.C').controller('HomeCtrl',['$scope', 'global',  function ($scope, global) {    $scope.url = global.url;  //全局變量  }])9、scripts/controllers/ListCtrl.js （重要部分，列表數(shù)據(jù)的controller部分）復(fù)制代碼angular.module('app.C').controller('ListCtrl', ['$scope', '$http',  function ($scope, $http) {    //初始化數(shù)據(jù)    //分頁(yè)參數(shù)（參數(shù)名固定不可變）    $scope.pageConfig = {      // pageSize:10,  //每頁(yè)條數(shù)（不設(shè)置時(shí)，默認(rèn)為10）      pageIndex:1,  //當(dāng)前頁(yè)碼      totalCount:0,  //總記錄數(shù)      totalPage:0,   //總頁(yè)碼      prevPage:'< 上一頁(yè)',   //上一頁(yè)（不設(shè)置時(shí)，默認(rèn)為：<）      nextPage:'下一頁(yè) >',   //下一頁(yè)（不設(shè)置時(shí)，默認(rèn)為：>）      firstPage:'<< 首頁(yè)',   //首頁(yè)（不設(shè)置時(shí)，默認(rèn)為：<<）      lastPage:'末頁(yè) >>',   //末頁(yè)（不設(shè)置時(shí)，默認(rèn)為：>>）      degeCount:3,       //當(dāng)前頁(yè)前后兩邊可顯示的頁(yè)碼個(gè)數(shù)（不設(shè)置時(shí)，默認(rèn)為3）      isShowEllipsis:true  //是否顯示省略號(hào)不可點(diǎn)擊按鈕（true：顯示，false：不顯示）    }    $scope.listData = [];  //列表數(shù)據(jù)    //請(qǐng)求接口的參數(shù)（參數(shù)名根據(jù)接口文檔確定）    $scope.params = {      page: $scope.pageConfig.pageIndex, //當(dāng)前頁(yè)碼      pageSize: $scope.pageConfig.pageSize,  //每頁(yè)條數(shù)      course_id: 537    }    $scope.getList = function () {      var promise = $http({        method:"post",        url:"http://api.admin.app.mtedu.com/v1/census/course-student-learning-progress",        params:$scope.params,        headers:{Authorization:'Bearer newtask2017'},      }).success(function(res){        if(res.success){          $scope.listData = res.data.list;          $scope.pageConfig.totalCount = res.data.totalCount; //總記錄數(shù)          $scope.pageConfig.totalPage = Math.ceil($scope.pageConfig.totalCount / $scope.pageConfig.pageSize); //總頁(yè)數(shù)          console.log('總記錄數(shù)：'+$scope.pageConfig.totalCount+'； 總頁(yè)數(shù)：'+$scope.pageConfig.totalPage+'；當(dāng)前頁(yè)碼：'+$scope.pageConfig.pageIndex);          $scope.$broadcast("initPage")  //調(diào)用分頁(yè)組件里的初始化頁(yè)碼函數(shù)        }else{          alert('系統(tǒng)錯(cuò)誤');        }      }).error(function(data){        alert('系統(tǒng)錯(cuò)誤');      })    }    $scope.getList()    //監(jiān)聽分頁(yè)組件中的分頁(yè)點(diǎn)擊事件    $scope.$on("clickPage", function(e, m) {      $scope.params.page = $scope.pageConfig.pageIndex;      $scope.params.pageSize = $scope.pageConfig.pageSize;      console.log('pageSize='+$scope.params.pageSize);      $scope.getList();    })  }])

10、scripts/directive/pageDirective.js （重要部分，自定義指令的js部分）

angular.module('app.D').directive('pageDirective',['$rootScope',  function ($rootScope) {    var link = function (scope,elem,attr) {      scope.pageConfig.pageIndex; //當(dāng)前頁(yè)碼      scope.pageConfig.totalPage; //總頁(yè)數(shù)      scope.pageConfig.totalCount; //總記錄數(shù)      scope.pageConfig.pageSize = scope.pageConfig.pageSize || 10; //每頁(yè)條數(shù)      var prev = scope.pageConfig.prevPage || '<'; //上一頁(yè)文字      var next = scope.pageConfig.nextPage || '>'; //下一頁(yè)文字      var first = scope.pageConfig.firstPage || '<<'; //首頁(yè)文字      var last = scope.pageConfig.lastPage || '>>'; //末頁(yè)文字      var degeCount = scope.pageConfig.degeCount || 3; //當(dāng)前頁(yè)碼兩邊的頁(yè)碼個(gè)數(shù)（默認(rèn)：3）      var isShowEllipsis = scope.pageConfig.isShowEllipsis;  //是否顯示省略號(hào)不可點(diǎn)擊按鈕      var ellipsisBtn = isShowEllipsis ? '<li><span class="ellipsis">...</span></li>' : '';      //監(jiān)聽父作用域列表數(shù)據(jù)獲取成功后      scope.$on("initPage", function(e, m) {        initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount)      });      function initPage(totalPage, pageIndex, degeCount) {        var pageHtml = '';        var tmpHtmlPrev = '';        var tmpHtmlNext = '';        if(pageIndex - degeCount >= degeCount-1 && totalPage - pageIndex >= degeCount+1){  //前后都需要          var count = degeCount; //前后各自需要顯示的頁(yè)碼個(gè)數(shù)          for(var i=0; i<count; i++){            if(pageIndex != 1){              tmpHtmlPrev += '<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-number">'+(pageIndex-(count-i))+'</a></li>';            }            tmpHtmlNext += '<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';          }          pageHtml = '<li><a id="first_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+first+'</a></li>'+            '<li><a id="prev_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+prev+'</a></li>'+            ellipsisBtn+            tmpHtmlPrev +            '<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="active">'+pageIndex+'</a></li>'+            tmpHtmlNext +            ellipsisBtn+            '<li><a id="next_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+next+'</a></li>'+            '<li><a id="last_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+last+'</a></li>';        }else if(pageIndex - degeCount >= degeCount-1 && totalPage - pageIndex < degeCount+1) { //前需要，后不需要          var count = degeCount; //前需要顯示的頁(yè)碼個(gè)數(shù)          var countNext = totalPage - pageIndex; //后需要顯示的頁(yè)碼個(gè)數(shù)          if(pageIndex != 1){            for(var i=0; i<count; i++){              tmpHtmlPrev += '<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-number">'+(pageIndex-(count-i))+'</a></li>';            }          }          for(var i=0; i<countNext; i++){            tmpHtmlNext += '<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';          }          pageHtml = '<li><a id="first_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+first+'</a></li>'+            '<li><a id="prev_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+prev+'</a></li>'+            ellipsisBtn+            tmpHtmlPrev +            '<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="active">'+pageIndex+'</a></li>'+            tmpHtmlNext +            '<li><a id="next_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+next+'</a></li>'+            '<li><a id="last_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+last+'</a></li>';        }else if(pageIndex - degeCount < degeCount-1 && totalPage - pageIndex >= degeCount+1){ //前不需要，后需要          var countPrev = pageIndex - 1; //前需要顯示的頁(yè)碼個(gè)數(shù)          var count = degeCount; //后需要顯示的頁(yè)碼個(gè)數(shù)          if(pageIndex != 1){            for(var i=0; i<countPrev; i++){              tmpHtmlPrev += '<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-number">'+(pageIndex-(countPrev-i))+'</a></li>';            }          }          for(var i=0; i<count; i++){            tmpHtmlNext += '<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';          }          pageHtml = '<li><a id="first_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+first+'</a></li>'+            '<li><a id="prev_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+prev+'</a></li>'+            tmpHtmlPrev +            '<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="active">'+pageIndex+'</a></li>'+            tmpHtmlNext +            ellipsisBtn+            '<li><a id="next_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+next+'</a></li>'+            '<li><a id="last_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+last+'</a></li>';        }else if(pageIndex - degeCount < degeCount-1 && totalPage - pageIndex < degeCount+1){  //前后都不需要          var countPrev = pageIndex - 1; //前需要顯示的頁(yè)碼個(gè)數(shù)          var countNext = totalPage - pageIndex; //后需要顯示的頁(yè)碼個(gè)數(shù)          if(pageIndex != 1){            for(var i=0; i<countPrev; i++){              tmpHtmlPrev += '<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-number">'+(pageIndex-(countPrev-i))+'</a></li>';            }          }          for(var i=0; i<countNext; i++){            tmpHtmlNext += '<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';          }          pageHtml = '<li><a id="first_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+first+'</a></li>'+            '<li><a id="prev_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+prev+'</a></li>'+            tmpHtmlPrev +            '<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="active">'+pageIndex+'</a></li>'+            tmpHtmlNext +            '<li><a id="next_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+next+'</a></li>'+            '<li><a id="last_page" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+last+'</a></li>';        }        document.getElementById('page_ul').innerHTML = pageHtml;      }      /*點(diǎn)擊頁(yè)碼（首頁(yè)、上一頁(yè)、下一頁(yè)、末頁(yè)）*/      document.getElementById('page_ul').addEventListener('click', function (e) {        console.log(456);        var _this = e.target;  //當(dāng)前被點(diǎn)擊的a標(biāo)簽        var idAttr = _this.id; //id屬性        var className = _this.className;  //class屬性        if(idAttr == 'first_page'){ //如果是點(diǎn)擊的首頁(yè)          scope.pageConfig.pageIndex = 1;        }else if(idAttr == 'prev_page'){  //如果點(diǎn)擊的是上一頁(yè)          scope.pageConfig.pageIndex = scope.pageConfig.pageIndex == 1 ? scope.pageConfig.pageIndex : scope.pageConfig.pageIndex - 1 ;        }else if(idAttr == 'next_page'){ //如果點(diǎn)擊的是下一頁(yè)          scope.pageConfig.pageIndex = scope.pageConfig.pageIndex == scope.pageConfig.totalPage ? scope.pageConfig.pageIndex : parseInt(scope.pageConfig.pageIndex) + 1;        }else if(idAttr == 'last_page'){ //如果點(diǎn)擊的是末頁(yè)          scope.pageConfig.pageIndex = scope.pageConfig.totalPage;        }else if(className == 'page-number'){  //如果點(diǎn)擊的是數(shù)字頁(yè)碼          scope.pageConfig.pageIndex = _this.innerText;        }        initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount);        scope.$emit('clickPage');      });      /*改變每頁(yè)條數(shù)*/      document.getElementById('page_size').addEventListener('change', function () {        var _this = this;        scope.pageConfig.pageIndex = 1;        scope.pageConfig.pageSize = _this.value - 0;        initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount);        scope.$emit('clickPage');      })      /////////////////////////// 以下注釋部分是用jQuery寫的點(diǎn)擊頁(yè)碼部分 /////////////////////////////      /*點(diǎn)擊數(shù)字頁(yè)*/      // $('#page_ul').on('click','a',function () {      //   var _this = $(this);      //   scope.pageConfig.pageIndex = _this.text();      //   initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount)      //   scope.$emit('clickPage')      // });      /*點(diǎn)擊首頁(yè)*/      // $('#page_ul').on('click','#first_page',function () {      //   var _this = $(this);      //   scope.pageConfig.pageIndex = 1;      //   initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount)      //   scope.$emit('clickPage')      // });      // /*點(diǎn)擊上一頁(yè)*/      // $('#page_ul').on('click','#prev_page',function () {      //   var _this = $(this);      //   scope.pageConfig.pageIndex = scope.pageConfig.pageIndex == 1 ? scope.pageConfig.pageIndex : scope.pageConfig.pageIndex - 1 ;      //   initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount)      //   scope.$emit('clickPage')      // });      // /*點(diǎn)擊下一頁(yè)*/      // $('#page_ul').on('click','#next_page',function () {      //   var _this = $(this);      //   scope.pageConfig.pageIndex = scope.pageConfig.pageIndex == scope.pageConfig.totalPage ? scope.pageConfig.pageIndex : parseInt(scope.pageConfig.pageIndex) + 1;      //   initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount)      //   scope.$emit('clickPage')      // });      // /*點(diǎn)擊尾頁(yè)*/      // $('#page_ul').on('click','#last_page',function () {      //   var _this = $(this);      //   scope.pageConfig.pageIndex = scope.pageConfig.totalPage;      //   initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount)      //   scope.$emit('clickPage')      // });      /*改變每頁(yè)條數(shù)*/      // $('.page-l').on('change', '#page_size',function () {      //   var _this = $(this);      //   scope.pageConfig.pageIndex = 1;      //   scope.pageConfig.pageSize = _this.val()-0;      //   initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount)      //   scope.$emit('clickPage')      // });    };    return {      restrict: 'EA',      'scope':{        'pageConfig':'=',      },      templateUrl: 'views/directive/page-directive.html',      link: link    };  }])

二、效果