angularjs完结分页和搜求功用,AngularJs分页插件使用详解

By admin in 4858美高梅 on 2019年5月25日

angularjs完结分页和搜求功用,AngularJs分页插件使用详解。angularUI bootstrap提供的分页插件满足了绝大好些个用到的需求,具体内容如下

序言:在此之前写个3个jQuery的分页展现插件,存在繁多的bug,今后是因为事务供给,学习的一点AngularJS,重新用angularjs实现了那一个分页插件

 angularjs实现分页查询功用的实例代码,具体代码如下所示:

本文实例为大家享用了angularjs达成分页和找出呈现的具体代码,供我们参考,具体内容如下

在等级次序需要中,新添了八个需求:

兑现效益图:

//首页导入<script type="text/javascript" src="framework/tm.pagination.js"></script> 
//routerApp中注入'tm.pagination' 
//html页面上<tm-pagination conf="paginationConf"></tm-pagination> 
//controller.js代码 
var reSearch = function() { 
  var postData = { 
    //发送给后台的请求数据 
    currentPage: $scope.paginationConf.currentPage, 
    pageSize: $scope.paginationConf.itemsPerPage, 
    pickup: $scope.pickups, 
    startTime: $scope.startTime, 
    endTime: $scope.endTime, 
    minMoney: $scope.minMoney, 
    maxMoney: $scope.maxMoney 
  }; 
  $http.post('后台分页接口', postData).success(function(response) { 
    $scope.paginationConf.totalItems = response.totalElements; //总条数 
    $scope.takeGoodsLists = response.content; //具体内容 
    //共享的数据赋值 
  }); 
} 
$scope.reSearch = reSearch; 
//配置分页基本参数 
$scope.paginationConf = { 
  currentPage: 1, //起始页 
  //totalItems:300,//总共有多少条记录 
  itemsPerPage: 5, // 每页展示的数据条数 
  //pagesLength:5,//分页条目的长度 
  perPageOptions: [5, 10, 20] //可选择显示条数的数组 
}; 
//当页码和页面记录数发生变化时监控后台查询如果把currentPage和itemsPerPage分开监控的话则会触发两次后台事件。 
$scope.$watch('paginationConf.currentPage + paginationConf.itemsPerPage', reSearch); 

话非常的少说,上代码

一.随便设定每页展现的条条框框;

(效果图是加上了bootstrap的css文件)

你或然感兴趣的稿子:

  • angularjs表格分页效能详解
  • angularjs达成的前端分页控件示例
  • ANGULA奇骏JS中使用JQUEPAJEROY分页控件
  • AngularJS完成分页彰显数据库音信
  • 基于Angularjs完成分页功能
  • 读书Angularjs分页指令
  • AngularJS
    与Bootstrap达成表格分页实例代码
  • 详解angularjs结合pagination插件达成分页功效
  • Angularjs
    达成分页效率及示范代码
  • AngularJs分页插件使用详解
<html class="no-js" ng-app="myApp"> 
<body ng-controller="mainController"> 
<table class="am-table am-table-striped am-table-hover table-main"> 
<thead> 
<tr> 
<th>name</th> 
</tr> 
</thead> 
<tbody> 
<tr ng-repeat="item in houses | limitTo:listsPerPage"> 
<td>{{item.c}}</td> 
</tr> 
</tbody> 
</table> 
<div class="am-cf"> 
共 {{dataNum}} 条记录/当前第 {{currentPage+1}} 页 共 {{pages}} 页 
<div class="am-fr"> 
<ul class="am-pagination"> 
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" ng-click="prevPage()">«</a></li> 
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" ng-click="nextPage()">»</a></li> 
</ul> 
</div> 
</div> 
<script src="plugins/angularjs/angular.min.js" type="text/javascript"></script> 
</body> 
</html> 

2.足以手动输入页面,跳转到内定的页数。

4858美高梅 1

javascript

html代码

用法:

<script> 
var app = angular.module("myApp", []); 
app.controller("mainController", function ($scope, $http) { 
  //测试数据 
  var $data = {"fs":[{"c":"张一"},{"c":"张二"},{"c":"张三"},{"c":"张四"},{"c":"李一"},{"c":"李二"},{"c":"李三"},{"c":"李四"},{"c":"王一"},{"c":"王二"},{"c":"王三"},{"c":"王四"}]}; 
  $scope.currentPage = 0;//设置当前页是 0 
  $scope.listsPerPage = 3;//设置每页显示3个 
  //上一页 
  $scope.prevPage = function(){ 
    if($scope.currentPage > 0){ 
      $scope.currentPage--; 
    } 
  } 
  //下一页 
  $scope.nextPage = function(){ 
    if ($scope.currentPage < $scope.pages-1){ 
      $scope.currentPage++; 
    } 
  } 
  //监听搜索条件 
  $scope.$watch('search.c', function(){ 
    $scope.currentPage = 0; 
    searchResult(); 
  }); 
  //监听翻页 
  $scope.$watch('currentPage', function(){ 
    searchResult(); 
  }); 
  //搜索或翻页结果 
  function searchResult(){ 
    var out = []; 
    if($scope.search){ 
      angular.forEach($data.fs,function(k,v){ 
        if(k.c.indexOf($scope.search.c)>-1){ 
          out.push(k); 
        } 
      }); 
    } 
    else{ 
      out = $data.fs; 
    } 
    $scope.houses = out.slice($scope.currentPage*$scope.listsPerPage); 
    $scope.dataNum = out.length; 
    $scope.pages = Math.ceil($scope.dataNum/$scope.listsPerPage); 
  } 
}); 

</script> 
<div class="pagination-define p20 mt20" ng-hide="totalItems==0">
 <select ng-model="perPageSize" ng-change="pageChanged({currentPage:currentPage,perPageSize:perPageSize})" >
  <option value=10 ng-selected="perPageSize==10">10</option>
  <option value=20>20</option>
  <option value=30>30</option>
  <option value=50>50</option>
  <option value=100>100</option>
 </select>
 <uib-pagination items-per-page="numPerPage" total-items="totalItems" ng-model="currentPage" ng-change="pageChanged({currentPage:currentPage,perPageSize:perPageSize})" max-size="5" class="pagination-sm" boundary-link-numbers="true" boundary-links="true" rotate="false" previous-text="‹" next-text="›" first-text="«" last-text="»"></uib-pagination>
 <input type="text" ng-model="inputCurPage" min=1 cus-max-number ="{{maxPages}}" current-page="{{currentPage}}">
 <button class="btn btn-info btn-30h" ng-click="pageChanged({currentPage:inputCurPage,perPageSize:perPageSize})" ng-disabled="inputCurPage==''||submitting">Go</button>
</div>

angular-pagination.js代码:

如上正是本文的全体内容,希望对大家的求学抱有补助,也希望大家多多帮忙脚本之家。

css代码

/**
 * angularjs分页控件
 * Created by CHEN on 2016/11/1.
 */

angular.module('myModule', []).directive('myPagination', function () {
  return {
    restrict: 'EA',
    replace: true,
    scope: {
      option: '=pageOption'
    },
    template: '<ul class="pagination">' +
    '<li ng-click="pageClick(p)" ng-repeat="p in page" class="{{option.curr==p?\'active\':\'\'}}">' +
    '<a href="javascript:;" rel="external nofollow" >{{p}}</a>' +
    '</li>' +
    '</ul>',
    link: function ($scope) {
      //容错处理
      if (!$scope.option.curr || isNaN($scope.option.curr) || $scope.option.curr < 1) $scope.option.curr = 1;
      if (!$scope.option.all || isNaN($scope.option.all) || $scope.option.all < 1) $scope.option.all = 1;
      if ($scope.option.curr > $scope.option.all) $scope.option.curr = $scope.option.all;
      if (!$scope.option.count || isNaN($scope.option.count) || $scope.option.count < 1) $scope.option.count = 10;


      //得到显示页数的数组
      $scope.page = getRange($scope.option.curr, $scope.option.all, $scope.option.count);

      //绑定点击事件
      $scope.pageClick = function (page) {
        if (page == '«') {
          page = parseInt($scope.option.curr) - 1;
        } else if (page == '»') {
          page = parseInt($scope.option.curr) + 1;
        }
        if (page < 1) page = 1;
        else if (page > $scope.option.all) page = $scope.option.all;
        //点击相同的页数 不执行点击事件
        if (page == $scope.option.curr) return;
        if ($scope.option.click && typeof $scope.option.click === 'function') {
          $scope.option.click(page);
          $scope.option.curr = page;
          $scope.page = getRange($scope.option.curr, $scope.option.all, $scope.option.count);
        }
      };

      //返回页数范围(用来遍历)
      function getRange(curr, all, count) {
        //计算显示的页数
        curr = parseInt(curr);
        all = parseInt(all);
        count = parseInt(count);
        var from = curr - parseInt(count / 2);
        var to = curr + parseInt(count / 2) + (count % 2) - 1;
        //显示的页数容处理
        if (from <= 0) {
          from = 1;
          to = from + count - 1;
          if (to > all) {
            to = all;
          }
        }
        if (to > all) {
          to = all;
          from = to - count + 1;
          if (from <= 0) {
            from = 1;
          }
        }
        var range = [];
        for (var i = from; i <= to; i++) {
          range.push(i);
        }
        range.push('»');
        range.unshift('«');
        return range;
      }

    }
  }
});

您或许感兴趣的小说:

  • 4858美高梅 ,angularjs表格分页功用详解
  • ANGULACRUISERJS中动用JQUE凯雷德Y分页控件
  • angularjs完成的前端分页控件示例
  • AngularJS完成分页彰显数据库消息
  • 基于Angularjs达成分页成效
  • 学学Angularjs分页指令
  • AngularJS
    与Bootstrap达成表格分页实例代码
  • Angularjs分页查询的兑现
  • Angularjs
    实现分页作用及示范代码
  • 详解angularjs结合pagination插件达成分页功用
.pagination-define{
 text-align: center
}
.pagination-define input, .pagination-define select {
 padding-left: 3px;
 height: 30px;
 vertical-align: top;
 border: 1px solid #ccc;
 border-radius: 4px;
 width: 50px;
}
.pagination {
 margin: 0;
}
.pagination-define .btn-30h {
 vertical-align: top;
}
.btn-30h {
 padding-top: 4px;
 padding-bottom: 4px;
}

index.html代码:

Javascript代码

<!doctype html>
<html ng-app="app">
<head>
  <meta charset="UTF-8">
  <title>Angularjs分页控件</title>
  <script src="angular.min.js"></script> <!-- 引入angularjs文件,而且是1.x版本的 -->
  <script src="angular-pagination.js"></script> <!-- 引入angularjs分页控件 -->
  <script src="app.js"></script> <!-- 引入app.js -->
</head>
<body>

<!-- 控制器 -->
<div ng-controller="myCtrl">

  <!-- 分页控件指令 ,可以是元素 或者 属性 -->
  <my-pagination page-option="option"></my-pagination>

</div>

</body>
</html>
app.directive('cusMaxNumber', ['$timeout', function ($timeout) {
  return {
   restrict: 'EA',
   require: 'ngModel',
   scope: {
    maxNumber: '@cusMaxNumber',
    currentPage: '@currentPage'
   },
   link: function (scope, element, attr, ctrl) {
    ctrl.$parsers.push(function (viewValue) {
     var maxNumber = parseInt(scope.maxNumber, 10);
     var curNumber = scope.currentPage; //当前页数
     var transformedInput = viewValue.replace(/[^0-9]/g, '');
     if (transformedInput !== viewValue||parseInt(transformedInput,10)<1||parseInt(transformedInput,10)>maxNumber) {
      ctrl.$setViewValue(curNumber);
      ctrl.$render();
      return curNumber;
     }
     return viewValue;
    });
   }
  };
 }])
.directive('cusPagination',[function(){
  return {
   restrict: "E",
   templateUrl: 'views/template/pagination.html',
   scope: {
    numPerPage: "=numPerPage",
    totalItems: "=totalItems",
    currentPage: "=cusCurrentPage",
    perPageSize:"=perPageSize",
    inputCurPage:"=inputCurPage",
    maxPages:"=maxPages",
    pageChanged: "&pageChanged"
   },
   replace: false
  };
 }]);

app.js代码:

以上就是本文的全部内容,希望对大家的求学抱有援助,也希望我们多多协助脚本之家。

//引入 'myModele' 模块
var app = angular.module('app', ['myModule']);

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

  //设置分页的参数
  $scope.option = {
    curr: 1, //当前页数
    all: 20, //总页数
    count: 10, //最多显示的页数,默认为10

    //点击页数的回调函数,参数page为点击的页数
    click: function (page) {
      console.log(page);
      //这里可以写跳转到某个页面等...
    }
  }
});

你或然感兴趣的小说:

  • angularjs表格分页功能详解
  • angularjs完结的前端分页控件示例
  • ANGULATucsonJS中动用JQUEPRADOY分页控件
  • AngularJS完成分页展现数据库音讯
  • 基于Angularjs达成分页效能
  • Angularjs分页查询的达成
  • 上学Angularjs分页指令
  • AngularJS
    与Bootstrap达成表格分页实例代码
  • 详解angularjs结合pagination插件达成分页作用
  • Angularjs
    落成分页作用及示范代码

以上正是本文的全体内容,希望对我们的求学抱有协理,也希望大家多多协助脚本之家。

您或然感兴趣的作品:

  • angularjs表格分页成效详解
  • ANGULA景逸SUVJS中选用JQUE库罗德Y分页控件
  • AngularJS达成分页显示数据库音讯
  • 基于Angularjs完成分页功效
  • Angularjs分页查询的兑现
  • 学学Angularjs分页指令
  • AngularJS
    与Bootstrap实现表格分页实例代码
  • 详解angularjs结合pagination插件完毕分页功效
  • Angularjs
    完毕分页功用及示范代码
  • AngularJs分页插件使用详解

发表评论

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

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有