本篇文章由：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. [NOI2016]循环之美(杜教筛)

    首先要求每个数互不相等,故有$x\perp y$. 可以发现$\frac{x}{y}$在$k$进制下为纯循环小数的充要条件为$x\cdot k^{len}\equiv x(mod\ y)$,即$y\p ...

  2. POJ 2404 Jogging Trails（最小权完美匹配）

    [题目链接] http://poj.org/problem?id=2404 [题目大意] 给出一张图,求走遍所有的路径至少一次,并且回到出发点所需要走的最短路程 [题解] 如果图中所有点为偶点,那么一 ...

  3. BZOJ 1707 [Usaco2007 Nov]tanning分配防晒霜（扫描线+贪心+优先队列）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1707 [题目大意] 每个奶牛各自能够忍受的阳光强度有一个最小值和一个最大值 防晒霜的作 ...

  4. [AGC012E]Camel and Oases

    题意:有$n$个数轴上的绿洲,给定它们的坐标,有一只骆驼想要访问所有绿洲,当它的驼峰容量为$V$时,它可以走到和当前绿洲距离$\leq V$的绿洲,并可以继续走,它也可以用一次跳跃到达任意一个绿洲,只 ...

  5. 【随机化】Petrozavodsk Summer Training Camp 2016 Day 5: Petr Mitrichev Contest 14, Saturday, August 27, 2016 Problem I. Vier

    给你一个1~n的排列,让你找出4个下标a b c d,满足 (a+b)%n=(c+d)%n (w(a)+w(b))%n=(w(c)+w(d))%n,并且是非平凡解. 发现对于每个数i,找出两个数和为其 ...

  6. React事件系统入门

    React基于虚拟DOM实现了一个合成事件层,我们所定义的事件处理器会接受到一个合成事件层对象的实例,它完全符合W3C标准,不会存在任何IE标准的兼容性问题.并且和原生的浏览器事件一样拥有同样的接口, ...

  7. Java高级架构师（一）第32节：Nginx的进程结构、基本配置

    核心模块.事件模块.标准Http模块.可选Http模块.邮件模块.第三方模块和补丁.

  8. “Warning: Call-time pass-by-reference has been deprecated in”解决方法

    刚刚在调试一个PHP木马,显示错误信息为: Warning: Call-time pass-by-reference has been deprecated in E:\New-Hack520org\ ...

  9. 【maven】ecplise新建maven项目 报错Could not calculate build plan: Plugin org.apache.maven.plugins:maven-resources-plugin

    在ecplise上新建maven项目 报错: Could not calculate build plan: Plugin org.apache.maven.plugins:maven-resourc ...

  10. iOS:UIResponser控件的介绍(响应者)

    UIResponser响应者控件   知识: 在iOS中不是任何对象都能处理事件,只有继承了UIResponser的对象才能接收并处理事件.我们称之为“响应者对象” UIApplication,UIV ...