本篇文章由：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 Testing Round 14

    A:The Way to Home link:http://codeforces.com/contest/910/problem/A 题面:有每次最大跳跃距离d,只有一部分的点可以落脚,求最少几步达到 ...

  2. 【构造】【分类讨论】Codeforces Round #435 (Div. 2) C. Mahmoud and Ehab and the xor

    题意:给你n,x,均不超过10^5,让你构造一个无重复元素的n个元素的非负整数集合(每个元素不超过10^6),使得它们的Xor和恰好为x. 如果x不为0: 随便在x里面找一个非零位,然后固定该位为0, ...

  3. Spring AOP动态代理

    出现org.springframework.aop.framework.ProxyFactoryBean cannot be cast to 错误 在类型转换的时候, 调用getObject()方法, ...

  4. 1.1(SQL学习笔记)SQL基础

    一.SELECT 建表及数据填充语句下载:链接: https://pan.baidu.com/s/1WHYafwqKJEKq1kDwCH_Zlg 提取码: 3wy4 SELECT用于指定检索返回的结果 ...

  5. HDU 5289 Assignment rmq

    Assignment 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5289 Description Tom owns a company and h ...

  6. Linux关于终端的基本概念汇总（tty/pty）（转）

    在Linux系统的设备特殊文件目录/dev/下,终端特殊设备文件一般有以下几种: 1.串行端口终端(/dev/ttySn) 串行端口终端(Serial Port Terminal)是使用计算机串行端口 ...

  7. JIRA Service Desk 3.9.2 没有许可证

    https://my.atlassian.com/license/evaluation Server ID BFHT-0XFL-3NM8-3KRF SEN SEN-L10880225 License ...

  8. Spring事务管理笔记

    事务的目的就是要保证数据的高度完整性和一致性. 在实际的项目中,大多都是使用注解的方式来实现事物,这里也就简单记录下使用@Transactional方法和注意事项. 在xml中添加配置 1234567 ...

  9. Android视图SurfaceView的实现原理分析(示例,出错代码)

    在Android系统中,有一种特殊的视图,称为SurfaceView,它拥有独立的绘图表面,即它不与其宿主窗口共享同一个绘图表面.由于拥有独立的绘图表面,因此SurfaceView的UI就可以在一个独 ...

  10. tensorflow c++接口的编译安装与一些问题记录

    参考这篇文章安装,依次安装bazel,protocbuf,eigen3,然后下载tensorflow源码,编译c++ api,将编译结果拷贝到搜索路径 最后测试案例时遇到一些问题 (1)fatal e ...