首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Angularjs自定义指令实现分页插件(DEMO)

Posted in Javascript onSeptember 16, 2017

由于最近的一个项目使用的是angularjs1.0的版本，涉及到分页查询数据的功能，后来自己就用自定义指令实现了该功能。现在单独做了个简易的小demo，主要是为了分享自己写的分页功能。注：本实例调用的是真实接口数据。

首先、小demo的目录结构如下：

Angularjs自定义指令实现分页插件(DEMO)

一、代码部分

下面直接把每一个文件的代码贴出来，重点是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;">顶部区域</div>
  <div class="left-menu" ng-controller="MenuCtrl">
    <ul>
      <li ng-click="goState('home')" ng-class="{active:curUrl == '/home'}">首页</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 （重要，列表数据的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>创建时间</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>
  <!--分页指令-->
  <div page-directive page-config="pageConfig"></div>
</div>

3、views/home.html

<div>首页区域</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>每页显示</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 （重要部分，列表数据的controller部分）
复制代码
angular.module('app.C').controller('ListCtrl', ['$scope', '$http',
  function ($scope, $http) {
    //初始化数据
    //分页参数（参数名固定不可变）
    $scope.pageConfig = {
      // pageSize:10,  //每页条数（不设置时，默认为10）
      pageIndex:1,  //当前页码
      totalCount:0,  //总记录数
      totalPage:0,   //总页码
      prevPage:'< 上一页',   //上一页（不设置时，默认为：<）
      nextPage:'下一页 >',   //下一页（不设置时，默认为：>）
      firstPage:'<< 首页',   //首页（不设置时，默认为：<<）
      lastPage:'末页 >>',   //末页（不设置时，默认为：>>）
      degeCount:3,       //当前页前后两边可显示的页码个数（不设置时，默认为3）
      isShowEllipsis:true  //是否显示省略号不可点击按钮（true：显示，false：不显示）
    }
    $scope.listData = [];  //列表数据
    //请求接口的参数（参数名根据接口文档确定）
    $scope.params = {
      page: $scope.pageConfig.pageIndex, //当前页码
      pageSize: $scope.pageConfig.pageSize,  //每页条数
      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; //总记录数
          $scope.pageConfig.totalPage = Math.ceil($scope.pageConfig.totalCount / $scope.pageConfig.pageSize); //总页数
          console.log('总记录数：'+$scope.pageConfig.totalCount+'； 总页数：'+$scope.pageConfig.totalPage+'；当前页码：'+$scope.pageConfig.pageIndex);
          $scope.$broadcast("initPage")  //调用分页组件里的初始化页码函数
        }else{
          alert('系统错误');
        }
      }).error(function(data){
        alert('系统错误');
      })
    }
    $scope.getList()
    //监听分页组件中的分页点击事件
    $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; //当前页码
      scope.pageConfig.totalPage; //总页数
      scope.pageConfig.totalCount; //总记录数
      scope.pageConfig.pageSize = scope.pageConfig.pageSize || 10; //每页条数
      var prev = scope.pageConfig.prevPage || '<'; //上一页文字
      var next = scope.pageConfig.nextPage || '>'; //下一页文字
      var first = scope.pageConfig.firstPage || '<<'; //首页文字
      var last = scope.pageConfig.lastPage || '>>'; //末页文字
      var degeCount = scope.pageConfig.degeCount || 3; //当前页码两边的页码个数（默认：3）
      var isShowEllipsis = scope.pageConfig.isShowEllipsis;  //是否显示省略号不可点击按钮
      var ellipsisBtn = isShowEllipsis ? '<li><span class="ellipsis">...</span></li>' : '';
      //监听父作用域列表数据获取成功后
      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; //前后各自需要显示的页码个数
          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; //前需要显示的页码个数
          var countNext = totalPage - pageIndex; //后需要显示的页码个数
          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; //前需要显示的页码个数
          var count = degeCount; //后需要显示的页码个数
          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; //前需要显示的页码个数
          var countNext = totalPage - pageIndex; //后需要显示的页码个数
          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;
      }
      /*点击页码（首页、上一页、下一页、末页）*/
      document.getElementById('page_ul').addEventListener('click', function (e) {
        console.log(456);
        var _this = e.target;  //当前被点击的a标签
        var idAttr = _this.id; //id属性
        var className = _this.className;  //class属性
        if(idAttr == 'first_page'){ //如果是点击的首页
          scope.pageConfig.pageIndex = 1;
        }else if(idAttr == 'prev_page'){  //如果点击的是上一页
          scope.pageConfig.pageIndex = scope.pageConfig.pageIndex == 1 ? scope.pageConfig.pageIndex : scope.pageConfig.pageIndex - 1 ;
        }else if(idAttr == 'next_page'){ //如果点击的是下一页
          scope.pageConfig.pageIndex = scope.pageConfig.pageIndex == scope.pageConfig.totalPage ? scope.pageConfig.pageIndex : parseInt(scope.pageConfig.pageIndex) + 1;
        }else if(idAttr == 'last_page'){ //如果点击的是末页
          scope.pageConfig.pageIndex = scope.pageConfig.totalPage;
        }else if(className == 'page-number'){  //如果点击的是数字页码
          scope.pageConfig.pageIndex = _this.innerText;
        }
        initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount);
        scope.$emit('clickPage');
      });
      /*改变每页条数*/
      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写的点击页码部分 /////////////////////////////
      /*点击数字页*/
      // $('#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')
      // });
      /*点击首页*/
      // $('#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')
      // });
      // /*点击上一页*/
      // $('#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')
      // });
      // /*点击下一页*/
      // $('#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')
      // });
      // /*点击尾页*/
      // $('#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')
      // });
      /*改变每页条数*/
      // $('.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
    };
  }
])

二、效果

Angularjs自定义指令实现分页插件(DEMO)

Angularjs自定义指令实现分页插件(DEMO)

Angularjs自定义指令实现分页插件(DEMO)

Angularjs自定义指令实现分页插件(DEMO)

Angularjs自定义指令实现分页插件(DEMO)

总结

以上所述是小编给大家介绍的Angularjs自定义指令实现分页插件(DEMO)，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

Angularjs自定义指令实现分页插件(DEMO)

- Author -

web喵神

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Prototype1.6 JS 官方下载地址
Nov 30 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
Jquery跳到页面指定位置的方法
May 12 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
Jun 10 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 Javascript
javascript实现的简单的表单验证
Jul 10 Javascript
BootStrap响应式导航条实例介绍
May 06 Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 Javascript
基于JS对象创建常用方式及原理分析
Jun 28 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 Javascript
详解微信小程序框架wepy踩坑记录（与vue对比）
Mar 12 Javascript
JS分页的实现（同步与异步）
Sep 16 #Javascript
AngularJs 延时器、计时器实例代码
Sep 16 #Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 #Javascript
Javascript 严格模式use strict详解
Sep 16 #Javascript
ES6中Array.copyWithin()函数的用法实例详解
Sep 16 #Javascript
JS闭包的几种常见形式实例详解
Sep 16 #Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 #Javascript
axios(1) persistedstate(1) Vue3(1) HashSet集合(1) vuex(1) 高动态范围(1) OutputStream(1) InputStream(1) Set接口(1) HDR(1)
You might like
PHP关联数组的10个操作技巧
2013/01/21 PHP
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
php strnatcmp()函数的用法总结
2013/11/27 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
新鲜出炉的js tips提示效果
2011/04/03 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
浅析Ajax语法
2016/12/05 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
Vue使用Three.js加载glTF模型的方法详解
2020/06/14 Javascript
Vue看了就会的8个小技巧
2021/01/21 Vue.js
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
对python 自定义协议的方法详解
2019/02/13 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
PyCharm 创建指定版本的 Django（超详图解教程）
2019/06/18 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
巴西儿童时尚购物网站：Dinda
2019/08/14 全球购物
美国职棒大联盟的官方手套、球和头盔：Rawlings
2020/02/15 全球购物
俄罗斯建筑和装饰材料在线商店：Stroilandia
2020/07/25 全球购物
加拿大户外探险购物网站：SAIL
2020/06/27 全球购物
酒店开业庆典主持词
2014/03/21 职场文书
三年级学生评语大全
2014/12/26 职场文书
担保书范本
2015/01/20 职场文书
2016年“世界环境日”校园广播稿
2015/12/18 职场文书
《我是什么》教学反思
2016/02/16 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js
Java中API的使用方法详情
2022/04/06 Java/Android
如何Python使用re模块实现okenizer
2022/04/30 Python