pagination

https://github.com/ShuyunFF2E/ccms-components

by arzyu

HTML

<script src="https://cdn.bootcss.com/angular.js/1.5.6/angular.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.5.6/angular-resource.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script src="http://114.215.169.170:8080/dist/ccms-components.js"></script>
<link rel="stylesheet" href="http://114.215.169.170:8080/dist/ccms-components.css">
<div ng-controller="DemoCtrl as ctrl">
  <div class="demo">
    <h3>normal</h3>
    <pagination
        type="normal"
        page-num="ctrl.pageOptions.pageNum"
        page-size="ctrl.pageOptions.pageSize"
        page-size-list="ctrl.pageOptions.pageSizeList"
        totals="ctrl.pageOptions.totals"
        total-pages="ctrl.pageOptions.totalPages"
        on-change="ctrl.onPageChange(pageNum, pageSize)"></pagination>
  </div>
  <div class="demo">
    <h3>simple</h3>
    <pagination
        type="simple"
        page-num="ctrl.pageOptions.pageNum"
        page-size="ctrl.pageOptions.pageSize"
        page-size-list="ctrl.pageOptions.pageSizeList"
        totals="ctrl.pageOptions.totals"
        total-pages="ctrl.pageOptions.totalPages"
        on-change="ctrl.onPageChange(pageNum, pageSize)"></pagination>
  </div>
  <div class="demo">
    <h3>normal &amp; disable pagesize list</h3>
    <pagination
        page-num="ctrl.pageOptions.pageNum"
        page-size="ctrl.pageOptions.pageSize"
        page-size-list="ctrl.pageOptions.pageSizeList"
        page-size-list-disabled
        totals="ctrl.pageOptions.totals"
        total-pages="ctrl.pageOptions.totalPages"
        on-change="ctrl.onPageChange(pageNum, pageSize)"></pagination>
  </div>
</div>

SCSS

[ng-app] {
  margin: 1em;
}

JavaScript

angular
  .module('app', ['ccms.components'])
  .controller('DemoCtrl', DemoCtrl);

DemoCtrl.$inject = [];
function DemoCtrl() {
  this.pageOptions = {
    pageNum: 1,
    pageSize: 20,
    pageSizeList: [10, 15, 20, 30, 50],
    totals: 100,
    totalPages: 5
  };
  this.onPageChange = (pageNum, pageSize) => {
    // 获取业务数据...

    // 统计并更新 pageOptions 的对应字段
    let pageOptions = this.pageOptions;
    pageOptions.pageNum = pageNum;
    pageOptions.pageSize = pageSize;
    pageOptions.totals = 100;
    pageOptions.totalPages = Math.ceil(pageOptions.totals / pageSize);
  }
}