[Angularjs]单页应用之分页

写在前面

在项目中，用到单页应用的分页，当时想到使用滚动加载的方案，可是几次尝试都没配置成功，闲着无聊就弄了一个demo。

系列文章

[Angularjs]ng-select和ng-options

[Angularjs]ng-show和ng-hide

[Angularjs]ng-class,ng-class-even,ng-class-odd

一个例子

这里需要用到infinite-scroll，可以去这里下载：http://sroze.github.io/ngInfiniteScroll/index.html

Html

<!DOCTYPE html>

<html ng-app="myapp">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>滚动分页</title>

    <meta charset="utf-8" />

    <script src="JS/jquery.js"></script>

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

    <script src="JS/ng-infinite-scroll.js"></script>

    <script>

        var app = angular.module('myapp', ['infinite-scroll']);

        app.controller('PersonController', function ($scope, $http) {

            $scope.data = {

                busy: false,

                users: [],

                page:

            };

            //加载更多

            $scope.loadMore = function () {

                //是否正在加载

                if ($scope.data.busy) {

                    return;

                }

                $scope.data.busy = true;

                $http.get("/Service/UserInfo.ashx?page=" + $scope.data.page).success(function (data) {

                    console.log(data);

                    for (var i = ; i < data.length; i++) {

                        $scope.data.users.push(data[i]);

                    }

                });

                $scope.data.busy = false;

                $scope.data.page++;

            }

        });

        //过滤器

        app.filter('toGenderString', function () {

            return function (input) {

                if (input) {

                    return '男';

                } else {

                    return '女';

                }

            };

        });

        //将json格式的时间转换成一般时间

        app.filter('formatDate', function () {

            return function (jsondate) {

                jsondate = jsondate.replace("/Date(", "").replace(")/", "");

                if (jsondate.indexOf("+") > ) {

                    jsondate = jsondate.substring(, jsondate.indexOf("+"));

                } else if (jsondate.indexOf("-") > ) {

                    jsondate = jsondate.substring(, jsondate.indexOf("-"));

                }

                var date = new Date(parseInt(jsondate, ));

                var month = date.getMonth() +  <  ? "" + (date.getMonth() + ) : date.getMonth() + ;

                var currentDate = date.getDate() <  ? "" + date.getDate() : date.getDate();

                return date.getFullYear() + "-" + month + "-" + currentDate;

            };

        });

    </script>

    <style type="text/css">

        * {

            margin: ;

            padding: ;

        }

        div {

            width: %;

            border: 1px solid #0094ff;

            text-align: center;

        }

        table {

            margin: 3px auto;

            border: 0px solid #0094ff;

        }

        td {

            height: 30px;

        }

    </style>

</head>

<body>

    <div ng-controller="PersonController">

        <div infinite-scroll="loadMore()" infinite-scroll-disabled='data.busy' infinite-scroll-distance=''>

            <table cellpadding="" cellspacing="" border="">

                <tr><th>序号</th><th>姓名</th><th>创建时间</th><th>性别</th></tr>

                <tr ng-repeat="user in data.users">

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

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

                    <td>{{user.CreateDate|formatDate}}</td>

                    <td>{{user.Gender|toGenderString}}</td>

                </tr>

            </table>

        </div>

    </div>

</body>

</html>

一般处理程序

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Caching;

using System.Web.Script.Serialization;

namespace Wolfy.AngularJs.Service

{

    /// <summary>

    /// UserInfo 的摘要说明

    /// </summary>

    public class UserInfo : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

            int page = Convert.ToInt32(context.Request["page"]);

            int pageSize = ;

            context.Response.ContentType = "application/json";

            List<Person> lstPersons = null;

            var obj = context.Cache.Get("persons");

            if (obj == null)

            {

                lstPersons = new List<Person>();

                for (int i = ; i < ; i++)

                {

                    lstPersons.Add(new Person()

                    {

                        ID = i + ,

                        Gender = i %  ==  ? true : false,

                        Name = "wolfy" + (i + ).ToString()

                    });

                }

                context.Cache.Insert(

                    "persons",

                     lstPersons,

                     null,

                     DateTime.Now.AddSeconds(),

                     Cache.NoSlidingExpiration,

                     CacheItemPriority.Low,

                     CacheItemRemovedCallback);

            }

            else

            {

                lstPersons = obj as List<Person>;

            }

            JavaScriptSerializer jss = new JavaScriptSerializer();

            //分页

            var pageList = lstPersons.Skip(pageSize * (page - )).Take(pageSize);

            string json = jss.Serialize(pageList);

            context.Response.Write(json);

        }

        //这个为缓存移除时的回调函数，一定要保持与 Cache.Insert（）方法中的最后一个参数名字一致，

        //这里使用了委托，你可以在 Cache.Insert（）这个函数中转定义看到的，所以这里的格式就只能按我写的这种方法签名写。

        public static void CacheItemRemovedCallback(string key, object value, CacheItemRemovedReason reason)

        {

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

    public class Person

    {

        /// <summary>

        /// 编号

        /// </summary>

        public int ID { set; get; }

        /// <summary>

        /// 姓名

        /// </summary>

        public string Name { set; get; }

        /// <summary>

        /// 创建时间

        /// </summary>

        public DateTime CreateDate { set; get; } = DateTime.Now;

        /// <summary>

        /// 性别，true 男 false 女

        /// </summary>

        public bool Gender { set; get; } = true;

    }

}

测试结果

总结

这是在项目中用到一种分页特效，在移动端还是用的比较多的，当时没有弄成功，就弄了一个简单的demo，进行了测试。当然，用个“加载更多”的按钮，也是一种解决方案。

[Angularjs]单页应用之分页的更多相关文章

【UGUI】（三）------- 背包系统（上）之简易单页背包系统及检索功能的实现
背包系统,无论是游戏还是应用,都是常常见到的功能,其作用及重要性不用我多说,玩过游戏的朋友都应该明白. 在Unity中实现一个简易的背包系统其实并不是太过复杂的事.本文要实现的是一个带检索功能的背包系 ...
[Angularjs]asp.net mvc+angularjs+web api单页应用之CRUD操作
写在前面前篇文章整理了angularjs学习目录,有园子里的朋友问我要这方面的demo,周末也没什么事,就在之前的单页应用的demo上面添加了增删改查的操作.代码比较简单,这里只列举比较重要的代码片 ...
[译]用AngularJS构建大型ASP.NET单页应用（一）
原文地址:http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single 渣 ...
AngularJS实现单页应用的原理——路由(Route)
AngularJS实现单页应用的原理——路由(Route) 路由:告诉你一个通往某个特定页面的途径 http://127.0.0.1/index.html#/start http://127.0.0. ...
[译]用AngularJS构建大型ASP.NET单页应用（二）
原文地址:http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single 客 ...
[Angularjs]asp.net mvc+angularjs+web api单页应用
写在前面最近的工作一直在弄一些h5的单页应用,然后嵌入到app的webview中.之前一直在用angularjs+html+ashx的一套东西.实在是玩腻了.然后就尝试通过asp.net mvc的方 ...
Angular单页应用&AngularJS内部实现原理
回顾自定义指令登录后获取登录信息session 首先在登录验证的时候保存一个user 在学生管理页面中运用ajax调用获取到登录的用户信息对注销按钮添加点击事件:调用ajax在表现层给user赋 ...
Nodejs之MEAN栈开发（六）---- 用Angular创建单页应用(上)
在上一节中我们学会了如何在页面中添加一个组件以及一些基本的Angular知识,而这一节将用Angular来创建一个单页应用(SPA).这意味着,取代我们之前用Express在服务端运行整个网站逻辑的方 ...
单页Web应用优缺点
一.定义单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用.它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HT ...

随机推荐

EasyUI概述
EasyUI是基于jQuery的一套UI框架,主要应用场景是后台管理系统的UI开发. 其提供了以下几个模块的插件 1.布局 2.菜单与按钮 3.表单 4.窗口可以让开发人员,特别是后端开发人员,在不 ...
【转】【WPF】WPF样式（Style）—触发器
样式(Styles)由三部分构成:设置器(Setter).触发器(Triggers).资源(Resources). (1)触发器,让样式的使用更加准确.灵活和高效. (2)触发器(Triggers)主 ...
PKI公钥处理思路
背景: 在使用任何基于RSA服务之前,一个实体要真实可靠的获取其他实体的公钥. 1,一个可以确认公钥身份的方案:[离线确认] 主:B做同样的事情得到A的公钥. 但是这种方法扩展性差,不可行. ...
Linux Linux程序练习十（网络编程大文件发送）
//网络编程客户端--大文件传输 #include <stdio.h> #include <stdlib.h> #include <string.h> #inclu ...
[转]面向GPU的多LOD因子的大规模场景可视化策略
直接附上原文链接: 1.面向GPU的多LOD因子的大规模场景可视化策略 2.Real-Time Dynamic Level of Detail Terrain Rendering with ROAM
pyqt5界面与逻辑分离--信号槽的装饰器实现方式
本文展示了 pyqt5 信号槽的装饰器实现方式(借鉴自 eirc6) 一个简单的例子.实现功能:两个数相加,显示结果.如图两个文件,第一个是界面文件 ui_calc.py # ui_calc.py ...
js copy
Javascript 实现复制(Copy)动作方法大全投稿:hebedich 字体:[增加减小] 类型:转载时间:2014-06-20我要评论现在浏览器种类也越来越多,诸如 IE.Firefo ...
C#中 += (s, e) => 这些字符什么意思
public MainWindow(){InitializeComponent();this.Loaded += (s, e) => DiscoverKinectSensor();this.Un ...
Opencv step by step - 图像融合
两个图像的融合就是像素的融合了,其实手动操作即可,用函数操作更方便了. 下面代码的作用是融合阿狸和doctor,很和谐有木有! #include <cv.h> #include <h ...
HoloLens开发手记 - Unity之场景共享 Shared holographic experiences in Unity
佩戴HoloLens的多个用户可以使用场景共享特性来获取集合视野,并可以与固定在空间中某个位置的同一全息对象进行交互操作.这一切是通过空间锚共享(Anchor Sharing)来实现的. 为了使用共享 ...