angular分页的实现

做数据处理经常要用到分页,ui-bootstrap的分页挺好用的,但是要知道每个属性的意思,之前就在items-per-page上入了坑,ui-bootstrap默认是每页显示10条数据,如果这个值不设置和你想显示的数据条数相同的话,总数据量就会出错,以下是一个例子

<ul uib-pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" items-per-page="5"    ng-change="vm.userAction.init()" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;"    first-text="&laquo;" last-text="&raquo;"></ul>最终实现的效果是首尾,上下页,数字,
boundary-links="true" 设置是否显示首尾按钮
 total-items="totalItems" 所有页面中的项目总数具体参照   http://angular-ui.github.io/bootstrap/

这里想要强调的是缓存分页,当点击第二页内容,第二页中进入别的页面,当返回回来时候,页面还是第二页
   //缓存页数
            var nowPage = window.sessionStorage.getItem(‘vm.model.currentPage‘);

            if (page) { //这里传入Page参数主要是想点击查询按钮时候,页面回到第一页,而不是缓存的第二页
                nowPage = page;
                window.sessionStorage.setItem(‘vm.model.currentPage‘, nowPage);

            } else {
                if ($scope.currentPage != undefined) {
                    nowPage = $scope.currentPage;
                    window.sessionStorage.setItem(‘vm.model.currentPage‘, $scope.currentPage);
                } else if (nowPage == undefined || nowPage == ‘undefined‘) {
                    nowPage = 1;
                    window.sessionStorage.setItem(‘vm.model.currentPage‘, nowPage);
                } else {
                    window.sessionStorage.setItem(‘vm.model.currentPage‘, nowPage);
                }
            }
            var params1 = {
                orgName: vm.model.orgName,
                pageIndex: nowPage,
                pageRecorders: 10,
                token: window.sessionStorage.getItem(‘token‘)

            }
            NetWorkService.orgReport(params1).then(function (res) {
                console.log(res.data)
                $scope.currentPage = window.sessionStorage.getItem(‘vm.model.currentPage‘);//最后获取一下
                vm.model.orgList = res.data.orgList;
                $scope.totalItems = res.data.totalRecorders;

            })
时间: 2024-08-05 19:09:14

angular分页的实现的相关文章

angular 分页插件

这两天就要要到分页插件了,在家刚好边学习,边把分页插件写了 具体的github demo地址 好了,开始讲解demo html中关键的一句就是这个了 <div page-link conf="pagedata"></div> 继续看js中的 $scope.pagedata={ url:"aaa.json", pageSize:10, currentPage:1, returnValue:[], }这个就是conf的值通过directive的s

angular 分页插件的使用

html: <pagination total-items="totalItems" ng-model="currentPage" items-per-page="itemPerPage" previous-text="上一页" next-text="下一页" page-sizes="pageSizes" edit-page="editPage" ng-chan

angular 分页2

http://www.alliedjeep.com/2547.htm AngularJS Code (Users.js) var Users = angular.module('Users', []);Users.controller('UserList', function($scope, $http) {$scope.start = 0;$scope.showLimit = 10;$scope.count = 0;/* Default Users List */$http.get('welc

angular 分页

http://jsfiddle.net/SAWsA/11/# <html xmlns:ng="http://angularjs.org" ng-app lang="en"> <head> <meta charset="utf-8"> <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.n

经验谈 论前端架构的重要性

对软件开发来说,架构师一直是一个让程序员神往的职业,但实际工作中,大多数创业公司,甚至一定规模的公司都不具备架构师这个岗位. 那么架构对于开发团队来说到底有什么重要性呢? 就目前的web开发来说,除去总架构师,对于一个需求明确的项目又可分为两层,前端架构,后端架构,当然也可能被一人包揽,笔者是一名前端工程师,所以后端架构就不做讨论,我们仅仅看前端架构. 有人可能会说,前端不就是写写页面搞些特效么,怎么还扯上架构了呢? 对这种论调,我们从架构本身来说,为什么有架构,软件是作为计算机智能控制的一种程

Angular+Bootstrap实现分页(带省略号)

前言 前几天用Angularjs写一个后台管理界面时,需要写分页,自己懒得写于是想在网上搜索一个带省略号的插件,竟然没找到,那没办法就自己写吧 效果图 话不多说,直接上代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" href=

angular.js 分页

Angular.js+Bootstrap实现表格分页 最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页. 先上图看看最终结果: 不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功能. 首先表格的数据源来自于,Server.js 点击下载.通过get取数后分页显示. 1.表格是通过ng-repeat来展示的,代码如下: <table class="table table-bordered"> <

Angular简易分页设计

之前网站的后台管理为了图快,把Jquery写的前台页面使用的分页插件,套到Angular中使用.现在后台的小编说这东西有时候翻页失败,而插件代码十分复杂,无法定位bug进行修改,也无法保证修改后不会出现别的bug,干脆舍弃插件,自己写一个. 设计时,我大概看了一下插件的代码,基本思路就是通过数据处理判断,然后通过字符串拼接,生成新的dom元素.而我们需要的分页是在Angular中运行,应当尽量避免这种做法.怎么简单怎么来,我们固定一次只显示7个页码,不需要动态增删元素. <ul> <li

angular封装分页组件

1)分页模板页面product_pag.html <div style="margin-right:4px;float:right;"> <span style="color: blue; margin-right: 6px;">总 页 数 <strong class="colorred">{{pageObj.totalPage}}</strong> </span> <span s