ng-table支持一个时间段内浏览一段时间加载一部分数据,<code>NgTableParams</code>构造函数内置了一个默认的分页,并且支持设置。</br>
支持<code>getData</code>方法,需要向<code>NgTableParams</code>传递,多少行的数量。可以通过<code>NgTableParams.total()</code>实现。</br>
<div ng-app="myApp" class="container-fluid" ng-controller="demoController as demo">
<div class="row">
<div class="col-xs-12">
<h2 class="page-header">Pagination - basic example</h2>
<div class="row">
<div class="col-md-6">
<div class="bs-callout bs-callout-info">
<h4>Overview</h4>
<p><code>ngTable</code> supplies a pager to browse one "chunk" of data at a time. </p>
<p>Supply an initial paging configuration to the <code>NgTableParams</code> constructor call. As required, you can then change this configuration "on the fly".</p>
</div>
</div>
<div class="col-md-6">
<div class="bs-callout bs-callout-warning">
<h4>Got a <code>getData</code> function?</h4>
<p>Got your own <code>getData</code> function? Then you need to tell <code>NgTableParams</code> the total number of records that match its <code>filter</code>.</p>
<p>You do this by calling <code>NgTableParams.total()</code>. See <a href="http://codepen.io/christianacca/pen/mJoGPE" target="_">this codepen</a> for an example.</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h3>Default configuration</h3>
<table ng-table="demo.defaultConfigTableParams" class="table table-condensed table-bordered table-striped">
<tr ng-repeat="row in $data">
<td data-title="'Name'">{{row.name}}</td>
<td data-title="'Age'">{{row.age}}</td>
</tr>
</table>
</div>
<div class="col-md-6">
<h3>Customized configuration</h3>
<table ng-table="demo.customConfigParams" class="table table-condensed table-bordered table-striped">
<tr ng-repeat="row in $data">
<td data-title="'Name'">{{row.name}}</td>
<td data-title="'Money'">{{row.money}}</td>
</tr>
</table>
</div>
</div>
</div>
(function() {
"use strict";
var app = angular.module("myApp", ["ngTable", "ngTableDemos"]);
app.controller("demoController", demoController);
demoController.$inject = ["NgTableParams", "ngTableSimpleMediumList"];//注入NgTableParams和ngTableSimpleMediumList
function demoController(NgTableParams, simpleList) {
this.defaultConfigTableParams = new NgTableParams({}, { dataset: simpleList});//默认的分页
this.customConfigParams = createUsingFullOptions();//经过设置的分页
function createUsingFullOptions() {
var initialParams = {
count: 5 // 设置每一页展示数量
};
var initialSettings = {
// page size buttons (right set of buttons in demo)
counts: [],
// determines the pager buttons (left set of buttons in demo)
paginationMaxBlocks: 13,//最大页数
paginationMinBlocks: 2,//最小页数
dataset: simpleList
};
return new NgTableParams(initialParams, initialSettings);
}
}
})();