angular+pagination实现分页效果

朱雀 2020-11-13 19:17 879阅读 0赞

````
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>      
      
    <script src="../plugins/angularjs/pagination.js"></script>  
    <link rel="stylesheet" href="../plugins/angularjs/pagination.css">

<script type="text/javascript">  
        var app = angular.module('pinyougou', ['pagination']);  
          
        app.controller('brandController', function($scope, $http){  
              
            //查询品牌列表  
            $scope.findAll = function() {  
                $http.get('../brand/findAll.do').success(  
                    function(response) {  
                        $scope.list = response;  
                    }          
                );  
            }  
            //currentPage：当前页   totalItems：总记录数  itemsPerPage：每页记录数    
            //perPageOptions：每页显示多少条记录数  onChange：当页码发生变化调用方法  
            $scope.paginationConf = {  
                 currentPage: 1,  
                 totalItems: 10,  
                 itemsPerPage: 10,  
                 perPageOptions: [10, 20, 30, 40, 50],  
                 onChange: function(){  
                     $scope.reloadList();  
                 }  
            };  
              
            //刷新列表  
            $scope.reloadList = function() {  
                $scope.findPage($scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);  
            }  
              
            $scope.findPage = function(page, size) {  
                $http.get('../brand/findPage.do?page='+page+'&size='+size).success(  
                    function(response) {  
                        $scope.list = response.rows;    //显示当前页数据  
                        $scope.paginationConf.totalItems = response.total;    //更新总记录数  
                    }  
                );  
            }  
              
        });  
    </script>

<tm-pagination conf="paginationConf"></tm-pagination>
````

发表评论取消回复

表情：

评论列表（有 0 条评论，879人围观）

还没有评论，来说两句吧...

相关阅读

相关 rax+react hook 实现分页效果

'use strict'; import { createElement, useState, useEffect, memo } from 'rax';

野性酷女/ 2022年10月07日 01:54/ 0 赞/ 111 阅读

相关原生js实现分页的效果

想必大家都用过百度查找过我们想要的信息，每次我们查找东西的时候，百度都会返给我们很多很多相似和有关的结果，而这些结果是不可能一页就显示完全的，一般都会分很多很多页，效果图如下。

朱雀/ 2022年05月29日 05:55/ 0 赞/ 223 阅读

相关 PHP实现分页效果1

Talk is cheap,show the code like this.少废话，放码过来。 1.连接Mysql服务器，选择数据库，设定字符集; <?php

青旅半醒/ 2022年05月20日 07:40/ 0 赞/ 199 阅读

相关 Ajax实现无刷新分页效果

一、无刷新分页技术的必要性 ![70][] 如果我们通过“传统方式”实现上图的商品分页效果，每次分页的时候就会使得头部、左侧、底部等已经显示的信息重新从服务器获得出

傷城~/ 2022年05月20日 07:24/ 0 赞/ 210 阅读

相关 SSH2简单实现分页效果

1、首先数据库部分：字段类型全字符串 ![70][] 2、部署spring、hibernate、struts2、导包建path，新建包，生成pojo及映射文件，目录如

淡淡的烟草味﹌/ 2022年05月18日 03:19/ 0 赞/ 185 阅读

相关 js实现页面分页效果

最近接触老项目，项目要求修改表格添加分页功能，采用的bootstrap-table,在完成项目后，决定原生简单实现一下分页效果。效果： ![watermark_type_

谁借莪１个温暖的怀抱￠/ 2021年11月23日 00:42/ 0 赞/ 432 阅读

相关 vue + element-ui 实现分页效果

我使用得是el-table+el-pagination来实现的，话不多说，直接上代码  <el-table :

浅浅的花香味﹌/ 2021年11月09日 02:52/ 0 赞/ 331 阅读

相关 PHP+MYSQL实现分页效果

实现原理第三大步第一步：传入页码第二步：根据页码取出数据第三步：显示数据+分页条第一步传入页码：$page = $\_GET\['p'\]; 这一步传入的页

喜欢ヅ旅行/ 2021年09月16日 01:32/ 0 赞/ 361 阅读

相关 vue+Element-ui实现分页效果

当我们向后台请求大量数据的时候，并要在页面展示出来，请求的数据可能上百条数据或者更多的时候，并不想在一个页面展示，这就需要使用分页功能来去完成了。 1.本次所使用的是vue2

叁歲伎倆/ 2021年08月14日 01:31/ 0 赞/ 394 阅读

相关 angular+pagination实现分页效果

angular+pagination实现分页效果

朱雀/ 2020年11月13日 19:17/ 0 赞/ 880 阅读