利用Angular+Angular-Ui实现分页（代码加简单）

时间：2017-06-17 编辑：简简单单来源：一聚教程网

今天我们来看看一种只实现分页没有查询的例子吧，先看效果：

采用了Angular-UI中的分页组件，关于Angular-UI如何使用请移步这里https://angular-ui.github.io/bootstrap/中的bootstrap章节（其中ui-router等我也建议你多看看）

注意：必须按照官网上引入相应的js和css才能生效，千万不要忘记了。

HTML代码如下：

<div class="">

<table class="table">

<thead class="hed">

<tr>

<th>省份1th>

<th>省份2th>

<th>省份3th>

<th>省份4th>

tr>

thead>

<tbody>

<tr ng-repeat="a in allitem[currentPage-1]">

<td ng-bind="a.n">td>

<td ng-bind="a.s">td>

<td ng-bind="a.n">td>

<td ng-bind="a.s">td>

tr>

tbody>

table>

div>

<div class="">

<pagination boundary-links="true" total-items="totalItems"

ng-model="currentPage" class="pagination-sm embed-responsive-item"

previous-text="上一页"

next-text="下一页"

first-text="首页"

last-text="尾页"

max-size="maxSize"

rotate="false" num-pages="numPages">

pagination>

div>

JS代码如下：

$scope.currentPage =1;//初始当前页

$scope.maxSize = 3;//最多显示3页其他的用···代替

$scope.allitem=[];//存放所有页

$http.get('./js/test').success(

function (data) {

$scope.addr=data.l;

var num= $scope.addr.length;

$scope.totalItems =num;//共有多少条数据

for(var i=0;i

$scope.allitem.push($scope.addr.slice(i,i+10))

    }//此方法可以将一个数组分成多个数组并且放在了一个大数组里面，按每个数组10条数据【因为组件默认为10条数据一页】存放，假如41条数据的话我们将分成5页

}

);

笔者Js文件夹下的test.json存放的是中国地址JSon数据源，用于测试。

================================================================================

PS:上述版本是15年的了；现在上传下最新版本的样例吧；其实就是官网上的例子，鉴于某些宝宝不会FQ看，就拿下来了；

点击这里进行下载

上一个： JS中利用localStorage防止页面动态添加数据刷新后数据丢失
下一个： jquery实现的table排序功能示例

推荐专题

最新下载

热门教程

利用Angular+Angular-Ui实现分页（代码加简单）

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程