本篇文章由：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. 【DFS】【打表】Lattice Animals

    [ZOJ2669]Lattice Animals Time Limit: 5 Seconds      Memory Limit: 32768 KB Lattice animal is a set o ...

  2. 【扫描线】Gym - 101190E - Expect to Wait

    假设初始人数为0, 将每个时刻在等待的人数写下来,就是求个和. 如果纵坐标看成人数,横坐标看成时间,就是求个面积. 因为初始人数不一定为零,所以离线后扫描线即可回答所有询问. #include< ...

  3. 【动态规划技巧题】POJ2229-Sumsets

    [题目大意] 把一个数n分成2的指数幂相加的形式,问有几种情况. [思路] 如果当前i为奇数,则必定有至少一个1,可以看作i-1的情形再加上一个1.即f[i]=f[i-1]. 如果当前i为偶数,假设没 ...

  4. bzoj 1483: [HNOI2009]梦幻布丁

    1483: [HNOI2009]梦幻布丁 Description N个布丁摆成一行,进行M次操作.每次将某个颜色的布丁全部变成另一种颜色的,然后再询问当前一共有多少段颜色.例如颜色分别为1,2,2,1 ...

  5. 数据库之mysql的基本操作

    1 数据库 1.1 数据库介绍 为什么要有数据库? 数据需要大量的存储,把数据永久保存下来,可以保存到文件中,当然也可以保存到数据库中. 数据库:通俗的说,存储数据的仓库,是管理数据的文件夹:存放数据 ...

  6. spring quartz 配置

    quartz简介 各种企业应用几乎都会碰到任务调度的需求,就拿论坛来说:每隔半个小时生成精华文章的RSS文件,每天凌晨统计论坛用户的积分排名,每隔30分钟执行锁定用户解锁任务.任务调度本身涉及到多线程 ...

  7. FTP客户端工具

    推荐使用8UFTP.小.快.好! 8UFTP工具分为8UFTP客户端工具和 8UFTP智能扩展服务端工具,涵盖其它FTP工具所有的功能.不占内存,体积小,多线程,支持在线解压缩.界面友好,操作简单,可 ...

  8. android 检查能否上网

    文章一: 首先在,AndroidManifest.xml 中增加访问权限: <uses-permission android:name="android.permission.ACCE ...

  9. Log4j 日志级别

    转自:http://michales003.iteye.com/blog/1160605 日志记录器(Logger)是日志处理的核心组件.log4j具有5种正常级别(Level).: 1.static ...

  10. julia,集Python、C++、R为一体！Julia 1.0重磅发布，　MIT发布史上最强科学计算编程语言?创始人独家解答11个问题

    这个编程语言的新版本之所以受到整个人工智能界的关注,最主要的原因正是其将 C 语言的速度.Ruby 的灵活.Python 的通用性前所未有地结合在一起,支持并行处理,易于学习和使用,尤其适合科学和工程 ...