本篇文章由：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. 20162304 实验二《Java面向对象程序设计》实验报告

    20162304 实验二<Java面向对象程序设计>实验报告 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 ...

  2. httpWebRequest 文件下载

    服务版本: go file system ssdb github: https://github.com/dtxlink/gfs 上一篇: 一个 go 文件服务器 ssdb 通过 httpWebReq ...

  3. springBoot单元测试-基础单元测试

    1)在pom文件中加入junit支持 <!-- spring-boot-starter-test 单元测试 --> <dependency> <groupId>or ...

  4. 统计中的f检验和t检验的区别

    参考:http://emuch.net/html/201102/2841741.html 首先是目的不同.F检验用于比较两种分析方法是否存在显著差异(单边检验)或者两种方法紧密度是否存在差异(双边检验 ...

  5. 关于使用Android新版Camera即Camera2的使用介绍 暨解决Camera.PreviewCallback和MediaRecorder无法同时进行

    新的相机API也就是Camera2是在Android 5.0引进的.通常情况下,我们都是使用Android旧的相机API,纵然在Android Studio里老是提示已经废弃,但是只要都能用,也就没必 ...

  6. java反序列号漏洞分析资料汇总，待研究

    https://blog.chaitin.cn/2015-11-11_java_unserialize_rce/ http://blog.nsfocus.net/?s=fastjson http:// ...

  7. javascript 获取http头信息

    Javascript中跟response header有关的就两个方法: getResponseHeader 从响应信息中获取指定的http头 语法 strValue = oXMLHttpReques ...

  8. IOS是否在项目中存在，所使用的反射那点事

    NSClassFromString,NSSelectorFromString,isKingOfClass 1. NSClassFromString 这种方法推断类是否存在,假设存在就动态载入的,不存为 ...

  9. 对Storm ETL的初步思考

    ETL简介 ETL,是英文 Extract-Transform-Load 的缩写,用来描述将数据从来源端经过萃取(extract).转置(transform).加载(load)至目的端的过程. ETL ...

  10. linux实操常用命令总结

    1. linux目录操作命令 ------目录的增.删.改.查------ cd, pwd, ls, mkdir, mv, ls(du, df, tree) 切换目录,跟window的使用类似 cd ...