SPager 三个分页架构Demo

其他 2018-12-24 23:20:06 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/for_cxc/article/details/52072197

SPager.js

/* SPager 调用说明 */
//第一步 建立 SPager对象 var spager = new SPager(4); 参数为 每页 item 个数 PageSize
//第二步 必须重写 SPager 的 ReturnParentElement 方法 ，返回 item 的父元素
//第三步 必须重写 SPager 的 ReturnGifUrl 方法 ，返回 加载动画gif图片路径
//第四步 必须重写 SPager 的 CreateChilds 方法，返回 item 数组或字符串, 参数为 PageIndex，PageSize
//第五步 调用 SPager 的 Start 方法
(function () {
    window.SPager = function (PageSize) {
        this.ParentElement = null ;
        this.PageSize = PageSize;
        this.PageIndex = 1;
        this.loadgif = null;
        this.img_loading_flag = false;
        this.items = null;
        this.ReturnParentElement = function () { };
        this.ReturnGifUrl = function () { };
        this.CreateChilds = function () { };
    };
    SPager.prototype = {
        Start: function () {
            this.loadimg();
            this.ParentElement = this.ReturnParentElement();
            this.AddEvent();
        },
        loadimg: function () {
            var _this = this;
            this.loadgif = new Image();
            this.loadgif.onload = function(){
                _this.img_loading_flag = true;
            };
            this.loadgif.src = this.ReturnGifUrl();
        },
        AppendAllChild: function () {
            this.PageIndex++;
            this.items = this.CreateChilds(this.PageIndex, this.PageSize);
            if (this.items.length == 0) {
                return;
            }
            if (this.items.length<=this.PageSize) {
                for (var i = 0; i < this.items.length; i++) {
                    this.ParentElement.appendChild(this.items[i]);
                }
            }
            else {
                this.ParentElement.insertAdjacentHTML("beforeEnd", this.items);
            }
        },
        AddEvent: function () {
            var _this = this;
            var fun = function () {
                if (document.body.scrollTop == document.body.scrollHeight - window.innerHeight) {
                    document.removeEventListener("touchmove", fun, false);
                    _this.AddLoading();
                    _this.AppendAllChild();
                    _this.RemoveLoading();
                    document.addEventListener("touchmove", fun, false);
                }   
            };
            document.addEventListener("touchmove", fun, false);
        },
        AddLoading: function () {
            var loading = document.createElement("div");
            loading.setAttribute("id", "loading");
            loading.setAttribute("style", "text-align:center;background:white;");
            while(!this.img_loading_flag){
                //陷入死循环 等待gif图片加载完成
            }
            loading.appendChild(this.loadgif);
            this.ParentElement.appendChild(loading);
        },
        RemoveLoading: function () {
            var loading = document.getElementById("loading");
            this.ParentElement.removeChild(loading);
        },
    };
}());
XiaoNeiZhaoPin.js 

document.addEventListener("DOMContentLoaded", function () {
    var spager = new SPager(4);
    var pageindex1 = 1;
    var pageindex2 = 1;
    var pageindex3 = 1;
    var btn_schoolBtnA1 = document.getElementById("btn_schoolBtnA1");
    var btn_schoolBtnA2 = document.getElementById("btn_schoolBtnA2");
    var btn_schoolBtnA3 = document.getElementById("btn_schoolBtnA3");
    var flag = 1;
    spager.ReturnParentElement = function () {
        return document.getElementById("schoolBtnA1");
    };
    spager.ReturnGifUrl = function () {
        return "/images/cxc_img/loading.gif";
    };
    spager.CreateChilds = function (PageIndex, PageSize) {
        if (flag == 1) {
            pageindex1++;
            spager.PageIndex = pageindex1;
        }
        else if (flag == 2) {
            pageindex2++;
            spager.PageIndex = pageindex2;
        }
        else {
            pageindex3++;
            spager.PageIndex = pageindex3;
        }
        var s = "";
        AJAX("/MobileUser/Cuixianchao/AJAX_XiaoNeiZhaoPin", "post", "PageIndex=" + spager.PageIndex + "&PageSize=" + PageSize + "&flag=" + flag, function (data) {
            s = data;
        }, false);
        if (s.length < 10) {
            return "";
        }
        else {
            return s;
        }
    };
    spager.Start();
    btn_schoolBtnA1.onclick = function () {
        spager.ReturnParentElement = function () {
            return document.getElementById("schoolBtnA1");
        };
        flag = 1;
        spager.Start();
    };
    btn_schoolBtnA2.onclick = function () {
        spager.ReturnParentElement = function () {
            return document.getElementById("schoolBtnA2");
        };
        flag = 2;
        spager.Start();
    };
    btn_schoolBtnA3.onclick = function () {
        spager.ReturnParentElement = function () {
            return document.getElementById("schoolBtnA3");
        };
        flag = 3;
        spager.Start();
    };
}, false);

后台Action 

public ActionResult AJAX_XiaoNeiZhaoPin()
        {
            XiaoNeiZhaoPin_ViewModel xxx = new XiaoNeiZhaoPin_ViewModel
            {
                zczph = new List<_XNZCZPH>
                {
                    new _XNZCZPH {
                        id =1,
                        company_name ="阿里巴巴集团",
                        company_logo_url="/images/pic2.jpg",
                        school_name = "山西大学校招专场",
                        addr="体育广场",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNZCZPH {
                        id =2,
                        company_name ="阿里巴巴集团",
                        company_logo_url="/images/pic3.jpg",
                        school_name = "山西大学",
                        addr="图书馆会议室",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNZCZPH {
                        id =3,
                        company_name ="阿里巴巴集团",
                        company_logo_url="/images/pic2.jpg",
                        school_name = "山西大学",
                        addr="体育广场",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNZCZPH {
                        id =4,
                        company_name ="阿里巴巴集团",
                        company_logo_url="/images/pic1.jpg",
                        school_name = "山西大学",
                        addr="体育广场",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNZCZPH {
                        id =1,
                        company_name ="阿里巴巴",
                        company_logo_url="/images/pic2.jpg",
                        school_name = "山西大学校招专场",
                        addr="体育广场",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNZCZPH {
                        id =2,
                        company_name ="阿里巴巴",
                        company_logo_url="/images/pic3.jpg",
                        school_name = "山西大学",
                        addr="图书馆会议室",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNZCZPH {
                        id =3,
                        company_name ="阿里巴巴",
                        company_logo_url="/images/pic2.jpg",
                        school_name = "山西大学",
                        addr="体育广场",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNZCZPH {
                        id =4,
                        company_name ="阿里巴巴",
                        company_logo_url="/images/pic1.jpg",
                        school_name = "山西大学",
                        addr="体育广场",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNZCZPH {
                        id =1,
                        company_name ="阿里巴巴集",
                        company_logo_url="/images/pic2.jpg",
                        school_name = "山西大学校招专场",
                        addr="体育广场",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNZCZPH {
                        id =2,
                        company_name ="阿里巴巴集",
                        company_logo_url="/images/pic3.jpg",
                        school_name = "山西大学",
                        addr="图书馆会议室",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNZCZPH {
                        id =3,
                        company_name ="阿里巴巴集",
                        company_logo_url="/images/pic2.jpg",
                        school_name = "山西大学",
                        addr="体育广场",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNZCZPH {
                        id =4,
                        company_name ="阿里巴巴集",
                        company_logo_url="/images/pic1.jpg",
                        school_name = "山西大学",
                        addr="体育广场",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                },
                xyzph = new List<_XNXYZPH>
                {
                    new _XNXYZPH
                    {
                        id =1,
                        zhaopinhui_name ="山西大学春季招聘会",
                        zhaopinhui_logo_url="/images/pic1.jpg",
                        school_name = "山西大学",
                        addr="图书馆会议室",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNXYZPH
                    {
                        id =1,
                        zhaopinhui_name ="山西大学春季招聘会",
                        zhaopinhui_logo_url="/images/pic1.jpg",
                        school_name = "山西大学",
                        addr="图书馆会议室",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNXYZPH
                    {
                        id =1,
                        zhaopinhui_name ="山西大学春季招聘会",
                        zhaopinhui_logo_url="/images/pic1.jpg",
                        school_name = "山西大学",
                        addr="图书馆会议室",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNXYZPH
                    {
                        id =1,
                        zhaopinhui_name ="山西大学春季招聘会",
                        zhaopinhui_logo_url="/images/pic1.jpg",
                        school_name = "山西大学",
                        addr="图书馆会议室",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNXYZPH
                    {
                        id =1,
                        zhaopinhui_name ="山西大学春季招",
                        zhaopinhui_logo_url="/images/pic1.jpg",
                        school_name = "山西大学",
                        addr="图书馆会议室",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNXYZPH
                    {
                        id =1,
                        zhaopinhui_name ="山西大学春季招",
                        zhaopinhui_logo_url="/images/pic1.jpg",
                        school_name = "山西大学",
                        addr="图书馆会议室",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNXYZPH
                    {
                        id =1,
                        zhaopinhui_name ="山西大学春季招",
                        zhaopinhui_logo_url="/images/pic1.jpg",
                        school_name = "山西大学",
                        addr="图书馆会议室",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNXYZPH
                    {
                        id =1,
                        zhaopinhui_name ="山西大学春季招",
                        zhaopinhui_logo_url="/images/pic1.jpg",
                        school_name = "山西大学",
                        addr="图书馆会议室",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNXYZPH
                    {
                        id =1,
                        zhaopinhui_name ="山西大学春季招聘",
                        zhaopinhui_logo_url="/images/pic1.jpg",
                        school_name = "山西大学",
                        addr="图书馆会议室",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNXYZPH
                    {
                        id =1,
                        zhaopinhui_name ="山西大学春季招聘",
                        zhaopinhui_logo_url="/images/pic1.jpg",
                        school_name = "山西大学",
                        addr="图书馆会议室",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNXYZPH
                    {
                        id =1,
                        zhaopinhui_name ="山西大学春季招聘",
                        zhaopinhui_logo_url="/images/pic1.jpg",
                        school_name = "山西大学",
                        addr="图书馆会议室",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNXYZPH
                    {
                        id =1,
                        zhaopinhui_name ="山西大学春季招聘",
                        zhaopinhui_logo_url="/images/pic1.jpg",
                        school_name = "山西大学",
                        addr="图书馆会议室",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                },
                qyzph = new List<_XNZCZPH>
                {
                    new _XNZCZPH {
                        id =1,
                        company_name ="阿里巴巴集团",
                        company_logo_url="/images/pic2.jpg",
                        school_name = "山西大学校招专场",
                        addr="体育广场",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNZCZPH {
                        id =2,
                        company_name ="阿里巴巴集团",
                        company_logo_url="/images/pic3.jpg",
                        school_name = "山西大学",
                        addr="图书馆会议室",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNZCZPH {
                        id =3,
                        company_name ="阿里巴巴集团",
                        company_logo_url="/images/pic2.jpg",
                        school_name = "山西大学",
                        addr="体育广场",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNZCZPH {
                        id =4,
                        company_name ="阿里巴巴集团",
                        company_logo_url="/images/pic1.jpg",
                        school_name = "山西大学",
                        addr="体育广场",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNZCZPH {
                        id =1,
                        company_name ="阿里巴巴",
                        company_logo_url="/images/pic2.jpg",
                        school_name = "山西大学校招专场",
                        addr="体育广场",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNZCZPH {
                        id =2,
                        company_name ="阿里巴巴",
                        company_logo_url="/images/pic3.jpg",
                        school_name = "山西大学",
                        addr="图书馆会议室",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNZCZPH {
                        id =3,
                        company_name ="阿里巴巴",
                        company_logo_url="/images/pic2.jpg",
                        school_name = "山西大学",
                        addr="体育广场",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNZCZPH {
                        id =4,
                        company_name ="阿里巴巴",
                        company_logo_url="/images/pic1.jpg",
                        school_name = "山西大学",
                        addr="体育广场",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNZCZPH {
                        id =1,
                        company_name ="阿里巴巴集",
                        company_logo_url="/images/pic2.jpg",
                        school_name = "山西大学校招专场",
                        addr="体育广场",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNZCZPH {
                        id =2,
                        company_name ="阿里巴巴集",
                        company_logo_url="/images/pic3.jpg",
                        school_name = "山西大学",
                        addr="图书馆会议室",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNZCZPH {
                        id =3,
                        company_name ="阿里巴巴集",
                        company_logo_url="/images/pic2.jpg",
                        school_name = "山西大学",
                        addr="体育广场",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                    new _XNZCZPH {
                        id =4,
                        company_name ="阿里巴巴集",
                        company_logo_url="/images/pic1.jpg",
                        school_name = "山西大学",
                        addr="体育广场",
                        time_day="2016/6/3",
                        time_sec="14:20"
                    },
                }
            };
            int PageIndex = int.Parse(Request["PageIndex"]);
            int PageSize = int.Parse(Request["PageSize"]);
            int flag = int.Parse(Request["flag"]);
            if (flag==1)
            {
                List<_XNZCZPH> l = new List<_XNZCZPH>();
                int temp = PageSize * (PageIndex - 1);
                for (int i = temp; i < xxx.zczph.Count && i < temp + PageSize; i++)
                {
                    l.Add(xxx.zczph[i]);
                }
                xxx.zczph = l;
                xxx.xyzph.RemoveRange(0, xxx.xyzph.Count);
                xxx.qyzph.RemoveRange(0, xxx.qyzph.Count);
            }
            else if(flag == 2)
            {
                List<_XNXYZPH> l = new List<_XNXYZPH>();
                int temp = PageSize * (PageIndex - 1);
                for (int i = temp; i < xxx.xyzph.Count && i < temp + PageSize; i++)
                {
                    l.Add(xxx.xyzph[i]);
                }
                xxx.zczph.RemoveRange(0, xxx.zczph.Count);
                xxx.xyzph = l;
                xxx.qyzph.RemoveRange(0, xxx.qyzph.Count);
            }
            else
            {
                List<_XNZCZPH> l = new List<_XNZCZPH>();
                int temp = PageSize * (PageIndex - 1);
                for (int i = temp; i < xxx.qyzph.Count && i < temp + PageSize; i++)
                {
                    l.Add(xxx.qyzph[i]);
                }
                xxx.zczph.RemoveRange(0, xxx.zczph.Count);
                xxx.xyzph.RemoveRange(0, xxx.xyzph.Count);
                xxx.qyzph = l;
            }
            return View(xxx);
        }

ajaxView 

@{
    Layout = null;
}
@model mszp.Models.ViewModels.MobileCommon.cxc.XiaoNeiZhaoPin_ViewModel
@foreach (var item in Model.zczph)
{
    <div class="mainPositionC">
        <div class="mainPositionCPic">
            <img [email protected]_logo_url />
        </div>
        <a href="companyDetail3.html">
            <div class="mainPositionCC">
                <div class="mainPositionCC1"><span class="mainPositionTime">@item.time_day</span><span class="mainPositionUid">@item.company_name</span><div class="clear"></div></div>
                <div class="mainPositionCC1 mainPositionCC2"><span class="mainPositionTime">@item.time_sec</span><span class="mainPositionUid">@item.school_name</span><div class="clear"></div></div>
                <div class="mainPositionCC3">@item.addr</div>
            </div>
        </a>
        <div class="clear"></div>
    </div>
}
@foreach (var item in Model.xyzph)
{
    <div class="mainPositionC">
        <div class="mainPositionCPic"><img [email protected]_logo_url /></div>
        <a href="wholePlaceDetail3.html">
            <div class="mainPositionCC">
                <div class="mainPositionCC1"><span class="mainPositionTime">@item.time_day</span><span class="mainPositionUid">@item.zhaopinhui_name</span><div class="clear"></div></div>
                <div class="mainPositionCC1 mainPositionCC2"><span class="mainPositionTime">@item.time_sec</span><span class="mainPositionUid">@item.school_name</span><div class="clear"></div></div>
                <div class="mainPositionCC3">@item.addr</div>
            </div>
        </a>
        <div class="clear"></div>
    </div>
}
@foreach (var item in Model.qyzph)
{
    <div class="mainPositionC">
        <div class="mainPositionCPic">
            <img [email protected]_logo_url />
        </div>
        <a href="companyDetail3.html">
            <div class="mainPositionCC">
                <div class="mainPositionCC1"><span class="mainPositionTime">@item.time_day</span><span class="mainPositionUid">@item.company_name</span><div class="clear"></div></div>
                <div class="mainPositionCC1 mainPositionCC2"><span class="mainPositionTime">@item.time_sec</span><span class="mainPositionUid">@item.school_name</span><div class="clear"></div></div>
                <div class="mainPositionCC3">@item.addr</div>
            </div>
        </a>
        <div class="clear"></div>
    </div>
}



猜你喜欢

转载自blog.csdn.net/for_cxc/article/details/52072197
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
NEFU 117 素数个数的位数
Closest Common Ancestors (Lca,tarjan)
ELK部署
【转载】Hive笔记整理（三）
SQL语句（一）基本表的定义
关于Java web开发中的MySQL的事务语句
MFC创建自定义窗体
如何用一句话激怒程序员？
《逆袭大学》文摘——9.4 基础和应用的平衡中找到大学的节奏
【spring源码分析】@Value注解原理
每日归档
更多
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022