1. 程式人生 > >SPager 三個分頁架構Demo

SPager 三個分頁架構Demo

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>
}