本篇文章由：http://xinpure.com/angularjs-simple-paging-functionality/

初学 AngularJS, 尝试着写一些小功能

代码逻辑写得略粗糙，仅仅只是实现了简单的分页功能，使用 AngularJS 尝尝鲜。

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('welcome/get_users' + '/' + $scope.start + '/' + $scope.showLimit).success(function(data){

        $scope.users = data;

    });

    /* Count Users */

    $http.get('welcome/count_users').success(function(data){

        $scope.count = data;

    });

    /* Pagination */

    $scope.page = function (start) {

        $scope.start = start < 0 ? 0 : start;

        if (start >= $scope.count)   $scope.start = $scope.count - $scope.showLimit;

        $http.get('welcome/get_users' + '/' + $scope.start + '/' + $scope.showLimit).success(function(data){

            $scope.users = data;

        });

    }

});

HTML Code

<head>

    <script src="angular.js"></script>

    <script src="Users.js"></script>

</head>

<body ng-controller="UserList">

<div id="container">

    <div id="user_list">

        Search: <input class="query" type="text" ng-model="query" placeholder="Query">

        <hr />

        <table>

            <thead>

                <th>ID</th>

                <th>User Name</th>

                <th>Phone Number</th>

                <th>Email</th>

            </thead>

            <tbody>

                <tr ng-repeat="user in users | filter:query">

                    <td>{{user.id}}</td>

                    <td>{{user.user_name}}</td>

                    <td>{{user.phone_number}}</td>

                    <td>{{user.email}}</td>

                </tr>

            </tbody>

        </table>

        <hr />

        <button ng-click="page(0)">First</button>

        <button ng-click="page(start - showLimit)">Prev</button>

        <button ng-click="page(start + showLimit)">Next</button>

        <button ng-click="page(count - showLimit)">Last</button>

        <input type="text" ng-model="gotoPage" />

        <button ng-click="page(gotoPage * showLimit)">GO</button>

    </div>

</div>

</body>

CSS Code (稍微美化了一下)

body {

    background-color: #fff;

    margin: 40px;

    font: 13px/20px normal Helvetica, Arial, sans-serif;

    color: #4F5155;

}

#user_list {

    margin: 15px;

}

#container {

    margin: 10px;

    border: 1px solid #D0D0D0;

    box-shadow: 0 0 8px #D0D0D0;

}

input {

    width: 40px;

    height: 19px;

    padding: 3px;

    color: #555;

    border-radius: 3px;

    border: 1px solid #ccc;

}

input.query {

    width: 100px;

}

button {

    padding: 5px;

    background-color: #fff;

    border: 1px solid #ccc;

    border-radius: 3px;

}

table {

    border-spacing: 0;

    border-collapse: collapse;

}

td,th  {

    border: 1px solid #ccc;

    text-align: center;

    padding: 5px;

}

主要逻辑代码都是写死的，不灵活，慢慢改进吧。

AngularJS实现简单的分页功能的更多相关文章

  1. 简单封装分页功能pageView.js

    分页是一个很简单,通用的功能.作为一个有经验的前端开发人员,有义务把代码中类似这样公共的基础性的东西抽象出来,一来是改善代码的整体质量,更重要的是为了将来做类似的功能或者类似的项目,能减少不必要的重复 ...

  2. Python odoo中嵌入html简单的分页功能

    在odoo中,通过iframe嵌入 html,页面数据则通过controllers获取,使用jinja2模板传值渲染 html页面分页内容,这里写了判断逻辑 <!-- 分页 -->< ...

  3. 作为一个Java程序员连简单的分页功能都会写，你好意思嘛！

    今天想说的就是能够在我们操作数据库的时候更简单的更高效的实现,现成的CRUD接口直接调用,方便快捷,不用再写复杂的sql,带吗简单易懂,话不多说上方法 1.Utils.java工具类中的方法 1 /* ...

  4. Jquery、Ajax实现新闻列表页分页功能

    前端页面官网的开发,离不开新闻列表,新闻列表一般都会有分页的功能,下面是我自己总结加查找网上资料写的一个分页的功能,记录一下. 首先,官网的开发建立在前后端分离的基础上: 再有,后端小伙伴们提供列表页 ...

  5. WPF最简单的分页控件

    背景:最近在写项目的时候需要写一个简单的分页功能,因项目需要,没有改为MVVM模式,只需要在后台实现 1.呈现效果如下: 接下来就来上代码,看看怎么实现的 1.界面代码 <StackPanel ...

  6. php对文本文件进行分页功能简单实现

    php对文本文件进行分页功能简单实现 <!DOCTYPE> <html> <head> <meta http-equiv="Content-type ...

  7. jsp、js分页功能的简单总结

    一.概述 首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要.分 ...

  8. jQuery实现的简单分页功能的详细解析

    分页功能在项目开发中不可或缺,老司机操作起来就和呼吸一样简单,新手恐怕就会吃力一些. 今天我回顾了一下具体的操作步骤,决定详细的分析一下每一步的实现目的及原理. 我们会创建一个简单的json文件来模拟 ...

  9. 简单的beego分页功能代码

    一个简单的beego分页小插件(源代码在最下面): 支持条件查询 支持参数保留 支持自定义css样式 支持表/视图 支持参数自定义 默认为pno 支持定义生成链接的个数 使用方式: 1)action中 ...

随机推荐

  1. CodeForces - 1000E We Need More Bosses

    题面在这里! 依然一眼题,求出割边之后把图缩成一棵树,然后直接求最长链就行了2333 #include<bits/stdc++.h> #define ll long long using ...

  2. 【二项式定理】【推导】计蒜客17115 2017 ACM-ICPC 亚洲区（西安赛区）网络赛 B. Coin

    题意:投一枚硬币向上的概率是q/p.问你投K枚硬币,向上的枚数为偶数枚的概率是? 要求的即为. 这个东西是个二项展开式的偶数项系数和,来,我们复习一下高中数学,设f(x)=(ax+b)^n,则其偶数项 ...

  3. 记录SSD中的一些东西

    AnnotatedDatum是存放图片和BBox的类 // 估计是一张图片就对应于一个AnnotatedDatummessage AnnotatedDatum { enum AnnotationTyp ...

  4. Problem A: 深入浅出学算法022-汉诺塔问题II

    #include<stdio.h> void hanio(int n,char a,char b,char c) { ) printf("%c->%c\n",a, ...

  5. C - 壮志难酬

    #include<stdio.h> #include<stdlib.h> #include<string.h> int main() { ]= {'}; int i ...

  6. <摘录>Linux 环境下编译 0.11版本内核 kernel

    系统环境:Fedora 13 + gcc-4.4.5 最近在看<linux内核0.11完全注释>一书,由于书中涉及汇编语言的地方众多,本人在大学时汇编语言学得一塌糊涂,所以实在看不下去了, ...

  7. uboot如何检测XC2440是从Nand或Nor启动

    转:http://blog.chinaunix.net/uid-22030783-id-3347621.html 在XC2440开发板上做uboot从nandflash启动时,需要检测硬件启动方式,启 ...

  8. es6数组去重复

    var arr=[1,1,2,3,5,7,7,7] arr=Array.from(new Set(arr))

  9. Linux编程中的坑——C++中exit和return的区别

    今天遇到一个坑,折腾了一天才把这个坑填上,情况是这样的: 写了段代码,在main()函数中创建一个分离线程,结果这个线程什么都没干就直接挂掉了,代码长这样: int main() { 创建一个分离线程 ...

  10. 北邮连接bupt-mobile

    内容源自:[伪攻略]电脑(win10)连接BUPT-mobile教程 1.控制面板:控制面板\网络和 Internet\网络连接 右键——属性,记住网络配置器的名字(划线部分) 点击配置——高级——网 ...