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

2024-09-28 12:49:33

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

首先、小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)，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

对比分析Django的Q查询及AngularJS的Datatables分页插件

使用Q查询,首先要导入Q模块: from django.db.models import Q 可以组合使用&,|操作符用于多个Q的对象,产生一个新的Q对象,Q对象也可以用~操作符放在前面表示否定,如下例所示: if search: keywords_list = search.split(' ') query_list = [Q(status__icontains=get_success_fail_status(keyword)) if get_success_fail_keyword_stat
AngularJS优雅的自定义指令

学习要点 •为什么使用指令 •创建自定义指令 •使用jqLite工作一.为什么使用自定义指令 NG内置了许多自定义指令,但是它们有时并不能满足你的要求,这是需要我们创建自定义属性. 二.自定义指令接下来,我们来做一个小案例,当鼠标单击加价后,列表项自动递增,当然列表也是通过指令自动添加的,它本就是一个空的div <!DOCTYPE>  <html ng-app="exampleApp"> <head
Angularjs自定义指令实现三级联动选择地理位置

Angularjs自定义指令实现三级联动效果,先上图代码 <html lang="zh-CN" ng-app="myApp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport&quo
AngularJS创建自定义指令的方法详解

本文实例讲述了AngularJS创建自定义指令的方法.分享给大家供大家参考,具体如下: 这是一篇译文,来自angular开发者说明的指令.主要面向已经熟悉angular开发基础的开发者.这篇文档解释了什么情况下需要创建自己的指令,和如何去创建指令. 什么是指令从一个高的层面来讲,指令是angular $compile服务的说明,当特定的标签(属性,元素名,或者注释) 出现在DOM中的时候,它让编译器附加指定的行为到DOM上. 这个过程是很简单的.angular内部有很用这样自带的指令,比如说n
详解AngularJS中自定义指令的使用

自定义指令中使用AngularJS扩展HTML的功能.自定义指令使用的"指令"的功能定义.自定义指令只是替换了它被激活的元素.引导过程中AngularJS应用程序找到了匹配的元素,并做好使用自定义指令compile()方法一次活动再处理使用基于指令的范围自定义指令link()方法的元素. AngularJS提供支持,以下列元素的类型来创建自定义指令. Element directives - 指令遇到时激活一个匹配的元素. Attribute - - 指令遇到时激活一个匹配的属性. C
AngularJS 自定义指令详解及实例代码

AngularJS支持用户自定义标签属性,在不需要使用DOM节点操作的情况下,添加自定义的内容. 前面提到AngularJS的四大特性: 1 MVC 2 模块化 3 指令 4 双向数据绑定下面将会介绍如下的内容: 1 如何自定义指令 2 自定义指令的使用 3 自定义指令的内嵌使用如何自定义指令: Angular是基于模块的框架,因此上来肯定要创建一个自己的模块: var myAppModule = angular.module("myApp",[]); 然后在此模块基础上创建指令d
AngularJS自定义指令详解（有分页插件代码）

前言除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 通过 .directive() 函数来添加自定义的指令. 调用自定义指令时,需要在HTMl 元素上添加自定义指令名. 自定义指令命名规则:使用驼峰命名法来命名,即除第一个单词外的首字母需大写.如: myDirective. 在html页面调用该指令时需要以 - 分割,如: my-directive.示例代码: <body ng-app="myApp"> <my-directive><
深入讲解AngularJS中的自定义指令的使用

AngularJS的自定义指令,就是你自己的指令,加上编译器编译DOM时运行的原生核心函数.这可能很难理解.现在,假设我们想在应用中不同页面复用一些特定的代码,而又不复制代码.那么,我们就可以简单地把这段代码放到单独的文件,并调用使用自定义指令的代码,而不是一遍又一遍地敲下来.这样的代码更容易理解.AngularJS中有四种类型的自定义指令: 元素指令属性指令 CSS class 指令注释指令在我们现有的app中实现他们之前,我们来看看自定义指令是个什么样子: 元素指令在html中写
AngularJS使用自定义指令替代ng-repeat的方法

前言大家都知道对于处理小数量,ng-repeat是非常有用的,但是如果需要处理非常大的数量集,还是采用自定义的方法更好一些.特别是数据大多都是静态的或已预存储好的,这个时候应避免使用ng-repeat指令. ng-repeat中的表达式和 $watch Angular中的表达式都会创建$watch 的Scope 函数.用于监听模型变化,当你的模型部分发生变化时它会通知你.在ng-repeat指令中,如果某行数据有15列数据都绑定了表达式,如果数据有1000多行的话,那么$watch就又奖金15
Angularjs自定义指令实现分页插件(DEMO)

由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能.现在单独做了个简易的小demo,主要是为了分享自己写的分页功能.注:本实例调用的是真实接口数据. 首先.小demo的目录结构如下: 一.代码部分下面直接把每一个文件的代码贴出来,重点是ListCtrl.js和pageDirective.js: 1.index.html <!DOCTYPE html> <html lang="en" ng-app=&
AngularJS自定义指令之复制指令实现方法

本文实例讲述了AngularJS自定义指令之复制指令实现方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="bootstrap.min.c
AngularJS自定义指令实现面包屑功能完整实例

本文实例讲述了AngularJS自定义指令实现面包屑功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-CN" ng-app="myApp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"
Angularjs自定义指令Directive详解

今天学习angularjs自定义指令Directive. Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Admin". 在网页上放一个文本框和一个铵钮: <form id="form1" name="form1" ng-app="app" ng-controller="ctrl" novalidate> <i
详解angularJS自定义指令间的相互交互

AngularJS 自定义指令 transclude:当元素标签需要嵌套时使用,与ng-transclude配合使用.默认值为false不能使用嵌套,true为可以使用嵌套.在哪个标签上使用ng-transclude就在哪个标签内进行嵌套. 代码示例:(将hello.hi标签进行替换同时span标签嵌套div内) <script type="text/javascript"> var m = angular.module('myApp',[]); m.directive('
如何使用vue自定义指令构建拖放插件

我们都知道html5的拖放特性,利用它可以很方便的实现拖拽和放置功能,比如一些选择类操作的使用场景,让用户去拖拽比鼠标点击更容易接受和理解.今天我们就利用这一特性,结合vue的自定义指令,来实现一个简单但是实用的拖放插件. 为什么叫它插件?因为我们的目标不是开发一个vue组件,而是两个vue的自定义指令,并且最终会把这两个自定义指令封装到一个es6的class里,在实际项目中引入就可以很方便的使用了. 大部分的拖放使用场景都是把一些待选元素从A区域拖放到B区域.这里就涉及到两个概念,一个是可拖拽
AngularJS 自定义指令详解及实例代码

AngularJS支持用户自定义标签属性,在不需要使用DOM节点操作的情况下,添加自定义的内容. 前面提到AngularJS的四大特性: 1 MVC 2 模块化 3 指令 4 双向数据绑定下面将会介绍如下的内容: 1 如何自定义指令 2 自定义指令的使用 3 自定义指令的内嵌使用如何自定义指令: Angular是基于模块的框架,因此上来肯定要创建一个自己的模块: var myAppModule = angular.module("myApp",[]); 然后在此模块基础上创建指令d

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

相关推荐

随机推荐