angular+pagination实现分页效果

朱雀 2020-11-13 19:17 969阅读 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 条评论，969人围观）

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

相关阅读

相关前端实现分页效果

前言在实际开发中，大部分分页都是配合后端完成的。但是，有时候并不是这样，并非不是这样。后端会一次性返回所有的数据，而我们前端不可能展示所有数据，而是弄一个分页效果。还有

末蓝、/ 2023年10月13日 10:09/ 0 赞/ 44 阅读

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

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

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

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

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

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

相关 PHP实现分页效果1

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

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

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

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

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

相关 SSH2简单实现分页效果

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

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

相关 js实现页面分页效果

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

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

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

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

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

相关 PHP+MYSQL实现分页效果

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

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

相关 angular+pagination实现分页效果

angular+pagination实现分页效果

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