正文 

当前位置： 首页 > IT > java教程

css基于angularjs+bootstrap分页控件(代码片段)

author author     2023-01-05     425

关键词： 

/**
 * name: tm.pagination
 * Version: 0.0.2
 */
angular.module('pagination', []).directive('tmPagination',[function()
    return 
        restrict: 'EA',
        template: '<div class="page-list">' +
            '<ul class="pagination" ng-show="conf.totalItems > 0">' +
            '<li ng-class="disabled: conf.currentPage == 1" ng-click="prevPage()"><span>&laquo;</span></li>' +
            '<li ng-repeat="item in pageList track by $index" ng-class="active: item == conf.currentPage, separate: item == \'...\'" ' +
            'ng-click="changeCurrentPage(item)">' +
            '<span> item </span>' +
            '</li>' +
            '<li ng-class="disabled: conf.currentPage == conf.numberOfPages" ng-click="nextPage()"><span>&raquo;</span></li>' +
            '</ul>' +
            '<div class="page-total" ng-show="conf.totalItems > 0">' +
            '第<input type="text" ng-model="jumpPageNum"  ng-keyup="jumpToPage($event)"/>页 ' +
            '每页<select ng-model="conf.itemsPerPage" ng-options="option for option in conf.perPageOptions "></select>' +
            '/共<strong> conf.totalItems </strong>条' +
            '</div>' +
            '<div class="no-items" ng-show="conf.totalItems <= 0">暂无数据</div>' +
            '</div>',
        replace: true,
        scope: 
            conf: '='
        ,
        link: function(scope, element, attrs)

            // 变更当前页
            scope.changeCurrentPage = function(item) 
                if(item == '...')
                    return;
                else
                    scope.conf.currentPage = item;
                
            ;

            // 定义分页的长度必须为奇数 (default:9)
            scope.conf.pagesLength = parseInt(scope.conf.pagesLength) ? parseInt(scope.conf.pagesLength) : 9 ;
            if(scope.conf.pagesLength % 2 === 0)
                // 如果不是奇数的时候处理一下
                scope.conf.pagesLength = scope.conf.pagesLength -1;
            

            // conf.erPageOptions
            if(!scope.conf.perPageOptions)
                scope.conf.perPageOptions = [10, 15, 20, 30, 50];
            

            // pageList数组
            function getPagination(newValue, oldValue) 
                

                // conf.currentPage
                scope.conf.currentPage = parseInt(scope.conf.currentPage) ? parseInt(scope.conf.currentPage) : 1;
                


                // conf.totalItems
                scope.conf.totalItems = parseInt(scope.conf.totalItems) ? parseInt(scope.conf.totalItems) : 0;

                // conf.itemsPerPage (default:15)
                scope.conf.itemsPerPage = parseInt(scope.conf.itemsPerPage) ? parseInt(scope.conf.itemsPerPage) : 15;
                

                // numberOfPages
                scope.conf.numberOfPages = Math.ceil(scope.conf.totalItems/scope.conf.itemsPerPage);

                // judge currentPage > scope.numberOfPages
                if(scope.conf.currentPage < 1)
                    scope.conf.currentPage = 1;
                

                // 如果分页总数>0，并且当前页大于分页总数
                if(scope.conf.numberOfPages > 0 && scope.conf.currentPage > scope.conf.numberOfPages)
                    scope.conf.currentPage = scope.conf.numberOfPages;
                

                // jumpPageNum
                scope.jumpPageNum = scope.conf.currentPage;

                // 如果itemsPerPage在不在perPageOptions数组中，就把itemsPerPage加入这个数组中
                var perPageOptionsLength = scope.conf.perPageOptions.length;
                // 定义状态
                var perPageOptionsStatus;
                for(var i = 0; i < perPageOptionsLength; i++)
                    if(scope.conf.perPageOptions[i] == scope.conf.itemsPerPage)
                        perPageOptionsStatus = true;
                    
                
                // 如果itemsPerPage在不在perPageOptions数组中，就把itemsPerPage加入这个数组中
                if(!perPageOptionsStatus)
                    scope.conf.perPageOptions.push(scope.conf.itemsPerPage);
                

                // 对选项进行sort
                scope.conf.perPageOptions.sort(function(a, b)return a-b);

                scope.pageList = [];
                if(scope.conf.numberOfPages <= scope.conf.pagesLength)
                    // 判断总页数如果小于等于分页的长度，若小于则直接显示
                    for(i =1; i <= scope.conf.numberOfPages; i++)
                        scope.pageList.push(i);
                    
                else
                    // 总页数大于分页长度（此时分为三种情况：1.左边没有...2.右边没有...3.左右都有...）
                    // 计算中心偏移量
                    var offset = (scope.conf.pagesLength - 1)/2;
                    if(scope.conf.currentPage <= offset)
                        // 左边没有...
                        for(i =1; i <= offset +1; i++)
                            scope.pageList.push(i);
                        
                        scope.pageList.push('...');
                        scope.pageList.push(scope.conf.numberOfPages);
                    else if(scope.conf.currentPage > scope.conf.numberOfPages - offset)
                        scope.pageList.push(1);
                        scope.pageList.push('...');
                        for(i = offset + 1; i >= 1; i--)
                            scope.pageList.push(scope.conf.numberOfPages - i);
                        
                        scope.pageList.push(scope.conf.numberOfPages);
                    else
                        // 最后一种情况，两边都有...
                        scope.pageList.push(1);
                        scope.pageList.push('...');

                        for(i = Math.ceil(offset/2) ; i >= 1; i--)
                            scope.pageList.push(scope.conf.currentPage - i);
                        
                        scope.pageList.push(scope.conf.currentPage);
                        for(i = 1; i <= offset/2; i++)
                            scope.pageList.push(scope.conf.currentPage + i);
                        

                        scope.pageList.push('...');
                        scope.pageList.push(scope.conf.numberOfPages);
                    
                

                if(scope.conf.onChange)
                    

                    // 防止初始化两次请求问题
                    if(!(oldValue != newValue && oldValue[0] == 0)) 
                        scope.conf.onChange();
                    
                    
                
                scope.$parent.conf = scope.conf;
            

            // prevPage
            scope.prevPage = function()
                if(scope.conf.currentPage > 1)
                    scope.conf.currentPage -= 1;
                
            ;
            // nextPage
            scope.nextPage = function()
                if(scope.conf.currentPage < scope.conf.numberOfPages)
                    scope.conf.currentPage += 1;
                
            ;

            // 跳转页
            scope.jumpToPage = function()
                scope.jumpPageNum = scope.jumpPageNum.replace(/[^0-9]/g,'');
                if(scope.jumpPageNum !== '')
                    scope.conf.currentPage = scope.jumpPageNum;
                
            ;

            

            scope.$watch(function() 
                

                if(!scope.conf.totalItems) 
                    scope.conf.totalItems = 0;
                


                var newValue = scope.conf.totalItems + ' ' +  scope.conf.currentPage + ' ' + scope.conf.itemsPerPage;
                
                
                return newValue;

                


            , getPagination);

        
    ;
]);

.page-list .pagination float:left;
.page-list .pagination span cursor: pointer;
.page-list .pagination .separate spancursor: default; border-top:none;border-bottom:none;
.page-list .pagination .separate span:hover background: none;
.page-list .page-total float:left; margin: 25px 20px;
.page-list .page-total input, .page-list .page-total selectheight: 26px; border: 1px solid #ddd;
.page-list .page-total input width: 40px; padding-left:3px;
.page-list .page-total select width: 50px;

基于angularjs实现分页

基于Angularjs实现分页 http://www.cnblogs.com/sword-successful/archive/2015/06/28/4605222.html 查看详情

Bootstrap 4轮播不适用于AngularJS UI-Bootstrap

】Bootstrap4轮播不适用于AngularJSUI-Bootstrap【英文标题】：Bootstrap4carouselnotworkingwithAngularJSUI-Bootstrap【发布时间】：2019-02-2408:00:24【问题描述】：我正在尝试在我的bootstrap4网站中使用基于角度的轮播。当我使用bootstrap3(bootstrap.min.css)... 查看详情

如何使用bootstrap实现分页及翻页

...netMVC项目中需要对数据列表进行分类，这个本来就是基于bootstrap开发的后台，因此也就想着bootstrap是否有分页插件呢，或者说是基于jquery支持的分页功能，这样整体的网站后台风格便能够统一，又不用自己去写一套分页的功能。... 查看详情

基于bootstrap的网页开发

...t（即生产环境版本，此处为3.3.7版本），文件目录如下：bootstrap/├──css/│├──bootstrap.css│├──bootstrap.css.map│├──bootstrap.min.css│├──bootstrap.min.css.map│├──bootstrap-theme.css│├──boo 查看详情

angularjs中分页的应用

...现后台管理系统中需要用到分页，于是就找到了这个基于bootstrap的分页，封装性很好，用起来也非常方便，这里是模拟的数据库数据，实际中只需要将模拟数据换成接口调用返回的数据即可,并且可以实现按页、按数量的按需加... 查看详情

Yeoman 和 Bower 没有添加 Bootstrap CSS（AngularJS 生成器）

】Yeoman和Bower没有添加BootstrapCSS（AngularJS生成器）【英文标题】：YeomanandBowernotaddingBootstrapCSS(AngularJSgenerator)【发布时间】：2015-09-0522:19:08【问题描述】：我在Yeoman网页上关注codelab，到目前为止，我已经成功地关注了（我的开发... 查看详情

使用 AngularJS UI Bootstrap 分页时返回正确的页面

】使用AngularJSUIBootstrap分页时返回正确的页面【英文标题】：ReturningtotheproperpagewhenusingAngularJSUIBootstrappagination【发布时间】：2015-04-0313:26:18【问题描述】：我正在尝试了解如何使用AngularJSUIBootstrap的分页返回到分页项目列表的正... 查看详情

如何集成 bootstrap-3.0.1 和 AngularJS？

】如何集成bootstrap-3.0.1和AngularJS？【英文标题】：Howtointegratebootstrap-3.0.1andAngularJS?【发布时间】：2013-11-1115:30:57【问题描述】：我有一个项目应该同时使用AngularJS和Bootstrap(http://getbootstrap.com/)来获取警报和进程指示器。但是当我... 查看详情

angularjs配哪个css框架好？semanticui，bootstrap，还是其他

Bootstrap和Angular都是人们大量使用的工具。在很多项目中，它们需要一起使用。为什么不呢？他们已经改变了CSS和JS的开发方式，让前端既成为令人难以置信的工具。但是，把它们放在一起使用还有一些问题，特别是当你试图在Ang... 查看详情

angularjs配哪个css框架好？semanticui，bootstrap，还是其他

Bootstrap和Angular都是人们大量使用的工具。在很多项目中，它们需要一起使用。为什么不呢？他们已经改变了CSS和JS的开发方式，让前端既成为令人难以置信的工具。但是，把它们放在一起使用还有一些问题，特别是当你试图在Ang... 查看详情

基于窗口大小AngularJs的动态列css

】基于窗口大小AngularJs的动态列css【英文标题】：DynamicColumncssBasedOnWindowSizeAngularJs【发布时间】：2018-10-0501:25:04【问题描述】：这可能会在某个地方得到回答，但我不确定确切的术语，因为我是Web开发的新手。我正在使用mean.js... 查看详情

使用基于引导程序的 AngularJS 库而不破坏 CSS

】使用基于引导程序的AngularJS库而不破坏CSS【英文标题】：usingbootstrapbasedAngularJSlibrarieswithoutbreakingCSS【发布时间】：2014-07-2413:29:14【问题描述】：我有一个AngularJS应用程序正在开发中，CSS已经完成，只是添加了功能。我现在需... 查看详情

AngularJS + Bootstrap flexBox 不兼容？

】AngularJS+BootstrapflexBox不兼容？【英文标题】：AngularJS+BootstrapflexBoxincompatible?【发布时间】：2018-02-1303:47:07【问题描述】：尝试使用“flex”作为显示应该将元素排列在一起，但出于某种奇怪的原因它不会。我用简单的语法测试了... 查看详情

bootstrap.min.css和基于bootstrap的ace.min.css的.navbar样式颜色冲突问题

...前往后加载的原因。我正在做一个系统，一开始使用的是bootstrap.min.css的.navbar样式，默认颜色灰色，个人感觉还挺好看。后来又相中了ace的左侧的导航条，就引用了。然后发现前面的页面菜单栏是灰色，即默认色，而面的变成了... 查看详情

使用 Angular 和 Bootstrap 3 进行动态分页

】使用Angular和Bootstrap3进行动态分页【英文标题】：DynamicPaginationusingAngularandBootstrap3【发布时间】：2016-11-1603:58:31【问题描述】：我正在使用AngularJS和Bootstarp3，需要一些分页方面的帮助。我需要根据我拥有的数据量（大约150,000... 查看详情

基于bootstrap_信息采集

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>信息收集卡</title><linkrel="stylesheet"href="css/bootstrap.min.css"></head><body><div 查看详情

基于bootstrap_网站汇总页面

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>我的网页</title><linkrel="stylesheet"href="css/bootstrap.min.css"></head><body><!--头 查看详情

angularjs的ui组件ui-bootstrap分享——pager和pagination

原文地址：http://www.cnblogs.com/pilixiami/p/5634405.htmlui-bootstrap中有两个分页控件，一个是轻量级的Pager，只有上一页和下一页的功能，另一个是功能完整的Pagination，除了上一页和下一页，还可以选择首页和最后页，并且支持多种页数... 查看详情