建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

angular.js 的JQuery页码组件ng pagination

来源:易助科技网浏览量:11收藏

简介

ng pagination 是 angular.js 的页码JQuery组件,基于 directive 实现,样式使用的 bootstrap。

(下载的附件中附有DEMO)


angular.js 的JQuery页码组件ng pagination-示例图


参数说明:


Option NameDescription
firstTextset the first page button text, e.g first-text="First Page"
default is "First"
lastTextset the last page button text, e.g last-text="Last Page"
default is "Last"
prevTextset the prev page button text, e.g prev-text="Prev Page"
default is "Prev"
nextTextset the next page button text, e.g next-text="Next Page"
default is "Next"
showFirstLastTextset whether to show the first and last page button
default is true
showGotoset whether to show the goto textbox
default is false
gotoTextset the goto text
default is "Goto Page", only the showGoto option is set to true, it will be shown
showIfOnePageset whether to show the pagination directive when there is only one page
default is false, it will hide when the pagecount equals one
visiblePageCountset the visible page button count. e.g. the pageCount is 100, and the currentPage is 50, it will only show page 45 to page 54
default value is 10


使用

1.  引入文件


<link href="lib/ng-pagination.min.css" rel="stylesheet" />

<script src="../angularjs/angular-1.2.21.min.js"></script>
<script src="lib/ng-pagination.min.js"></script>


2.  HTML


<pager page-count="pageCount" current-page="currentPage" on-page-change="onPageChange()"></pager>


3.  调用


var app = angular.module('app', ['ng-pagination']);
app.controller('demoCtrl', function($scope) {
  $scope.onPageChange = function() {
    // ajax request to load data      
    console.log($scope.currentPage);
  };
  
  // set pagecount in $scope
  $scope.pageCount = 100;
});



相关链接

GitHub 地址 :https://github.com/leonwgc/angularjs-pagination

Gitee 地址:https://gitee.com/mqycn/ng-pagination