开发者社区> ghost丶桃子> 正文

[Angularjs]单页应用之分页

简介:
+关注继续查看

写在前面

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

系列文章

[Angularjs]ng-select和ng-options

[Angularjs]ng-show和ng-hide

[Angularjs]视图和路由(一)

[Angularjs]视图和路由(二)

[Angularjs]视图和路由(三)

[Angularjs]视图和路由(四)

[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: 1
            };
            //加载更多
            $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 = 0; 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("+") > 0) {
                    jsondate = jsondate.substring(0, jsondate.indexOf("+"));
                } else if (jsondate.indexOf("-") > 0) {
                    jsondate = jsondate.substring(0, jsondate.indexOf("-"));
                }
                var date = new Date(parseInt(jsondate, 10));
                var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                return date.getFullYear() + "-" + month + "-" + currentDate;

            };
        });
    </script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 98%;
            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='20'>
            <table cellpadding="0" cellspacing="0" border="1">
                <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 = 20;
            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 = 0; i < 1000; i++)
                {
                    lstPersons.Add(new Person()
                    {
                        ID = i + 1,
                        Gender = i % 2 == 0 ? true : false,
                        Name = "wolfy" + (i + 1).ToString()
                    });
                }
                context.Cache.Insert(
                    "persons",
                     lstPersons,
                     null,
                     DateTime.Now.AddSeconds(20),
                     Cache.NoSlidingExpiration,
                     CacheItemPriority.Low,
                     CacheItemRemovedCallback);
            }
            else
            {
                lstPersons = obj as List<Person>;
            }

            JavaScriptSerializer jss = new JavaScriptSerializer();
            //分页
            var pageList = lstPersons.Skip(pageSize * (page - 1)).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,进行了测试。当然,用个“加载更多”的按钮,也是一种解决方案。

博客地址: http://www.cnblogs.com/wolf-sun/
博客版权: 本文以学习、研究和分享为主,欢迎转载,但必须在文章页面明显位置给出原文连接。
如果文中有不妥或者错误的地方还望高手的你指出,以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下!如果你有更好的建议,不如留言一起讨论,共同进步!
再次感谢您耐心的读完本篇文章。http://www.cnblogs.com/wolf-sun/p/4713028.html

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
19015 0
实例解说AngularJS在自动化测试中的应用
本文通过实例介绍AngularJS在自动化测试中的应用。
1263 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
23873 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
13722 0
j2ee应用中页面编码问题的分析
首先,说说JSP/Servlet中的几个编码的作用。      在JSP/Servlet中主要有以下几个地方可以设置编 码,pageEncoding="UTF-8"、contentType="text/html;charset=UTF-8"、equest.setCharacterEncoding("UTF-8")和 response.setCharacterEncoding("UTF-8"),其中前两个只能用于JSP中,而后两个可以用于JSP和Servlet 中。
1023 0
【Elasticsearch 入门公开课】本周回顾:从概念入手,了解 Elastic Stack 生态能力及应用场景
『Elasticsearch 入门课程23讲』是阿里云开发者社区与极客时间合作,为 Elasticsearch 技术学习与开发者 提供的23节免费入门课程,从概念入手,结合实际操作,由浅入深快速掌握 Elasticsearch ,做到有的放矢。
18849 0
AngularJS 五大特性,加快 Web 应用开发
  AngularJS 是谷歌的一个 JavaScript 框架,旨在简化前端应用程序的开发。如果你在开发单页的应用程序,我敢肯定你已经听说过它。我是 AngularJS 的忠实粉丝,在这篇文章中我将概述五条我为什么这么喜欢它的原因。
760 0
1955
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载