SharePoint2013 SharePoint-Hosted 模式 分頁方法

/**分頁js插件
var ListPager = new listPaging();
先調用start方法加載上下文
而後調用dataLoad方法查詢第一頁數據
須要設置幾個屬性值
            ListPager.property.pageSize = 4;
            ListPager.start();
            ListPager.property.prevControlID = "prevBtn";//上一頁按鈕id
            ListPager.property.nextControlID = "nextBtn";//下一頁按鈕id
            ListPager.property.controlActionType = "css";//操做類型attr爲禁用 css爲顯示隱藏
而後在success這個成功回調的函數中設置上一頁的狀態
                var id = ListPager.property.listItems.itemAt(0).get_id();
                ListPager.property.PagingState = ["p_ID=" + id];
                p_ID是必填項。不然沒法返回上一頁
                若是查詢的數據 須要排序須要在PagingState的數組中添加你的排序字段
                例如：var title = ListPager.property.listItems.itemAt(0).get_item("Title");
                ListPager.property.PagingState = ["p_ID=" + id,"p_Title="+title];
                若是排序字段爲時間類型，好比2013-01-01 請轉成20130101
分頁方法調用：ListPager.getListPager
*/
    var listPaging = function () { };
    listPaging.prototype={
        property: {
            clientContext:null,
            webSite : null,
            siteUrl:"",
            listItems : null,
            query : null,
            targetList : null,
            position : null,
            lastState : null,
            pageState : "",
            itemIndex : 1,
            pageIndex : 1,
            pageSize : 15,
            prevControlID : "",
            nextControlID : "",
            PagingState:null,//Array 格式 ["key=value","key1=value1"],value 爲時間格式的話，好比2013-01-01 請轉成20130101
            /*   @ControlActionType: 分頁操做控件啓用和禁用的方式css/attr。*/
            controlActionType : "css"
        },
        start:function(){        
            this.property.clientContext = new SP.ClientContext.get_current();
            this.property.webSite = this.property.clientContext.get_web();
        },
        /*加載列表數據*/
        /**
        *   @listName: 列表名稱。
        *   @camlQuery: Caml語句
        *   @isUserList: 是否是用戶列表true/false
        *   @success: 成功執行方法。
        *   @error: 失敗執行方法
        */
        dataLoad: function (listName, camlQuery, isUserList,success, error) {
            this.property.pageIndex = 1;
            this.property.pageState = "";
            if (isUserList)
                this.property.targetList = this.property.webSite.get_siteUserInfoList();
            else
                this.property.targetList = this.property.webSite.get_lists().getByTitle(listName);
            this.property.query = new SP.CamlQuery();
            this.property.query.set_viewXml(camlQuery);
            this.property.listItems = this.property.targetList.getItems(this.property.query);
            this.property.clientContext.load(this.property.listItems);
            this.property.clientContext.executeQueryAsync(Function.createDelegate(this, success), Function.createDelegate(this, error));
        },
        getListPager:function (result, camlQuery, success, error) {
            this.property.pageState = result;
            this.property.lastState = this.property.position;//保存當前頁的狀態
            if (this.property.pageState == "prev") {//上一頁
                this.property.itemIndex = this.property.itemIndex - (this.property.listItems.get_count() + this.property.pageSize);
                if (this.property.position == null) {
                    this.property.position = new SP.ListItemCollectionPosition();
                }
                var prevPageString = this.property.position.get_pagingInfo();
                var prevString = "PagedPrev=TRUE";
                var searchStr = prevPageString.split("&");
                for (var i = 0; i < searchStr.length; i++) {
                    var key = searchStr[i].split("=")[0];
                    var value = searchStr[i].split("=")[1];
                    for (var p = 0; p < this.property.PagingState.length; p++) {
                        var state = this.property.PagingState[p].split("=");
                        if (key == state[0]) {
                            value = state[1];
                        }
                    }
                    prevString += "&"+key+"="+value;
                }
                this.property.position.set_pagingInfo(prevString);//設置上一頁讀取狀態
                this.property.pageIndex--;
                if (this.property.pageIndex == 1) {//若是到第一頁，上一頁禁用
                    //刪除下一頁的禁用狀態
                    if (this.property.controlActionType == "css") {
                        $("#" + this.property.prevControlID).css("display", "none");
                        $("#" + this.property.nextControlID).css("display", "block");
                    }
                    if (this.property.controlActionType == "attr") {
                        $("#" + this.property.nextControlID).removeAttr("disabled");
                        $("#" + this.property.prevControlID).attr("disabled", "disabled");
                    }
                }
                else {
                    if (this.property.controlActionType == "css") {
                        $("#" + this.property.nextControlID).css("display", "block");
                    }
                    if (this.property.controlActionType == "attr") {
                        $("#" + this.property.nextControlID).removeAttr("disabled");
                    }
                }
            }
            else {//下一頁
                if (this.property.position == null)
                    this.property.position = this.property.lastState;//賦值上一頁狀態
                if (this.property.controlActionType == "css")
                    $("#" + this.property.prevControlID).css("display", "block");
                if (this.property.controlActionType == "attr")
                    $("#" + this.property.prevControlID).removeAttr("disabled");
                //var prevPageString = this.property.position.get_pagingInfo();
                //prevPageString = prevPageString.replace("PagedPrev", "Paged");
                //this.property.position.set_pagingInfo(prevPageString);//設置上一頁讀取狀態
                this.property.pageIndex++;
            }
            this.property.query = new SP.CamlQuery();
            this.property.query.set_viewXml(camlQuery);
            this.property.query.set_listItemCollectionPosition(this.property.position);
            this.property.listItems = this.property.targetList.getItems(this.property.query);
            this.property.clientContext.load(this.property.listItems);
            this.property.clientContext.executeQueryAsync(Function.createDelegate(this, success), Function.createDelegate(this, error));
        },
        /*設置分頁控件狀態*/
        pagerControlHandle:function () {
            this.property.position = this.property.listItems.get_listItemCollectionPosition();
            if (this.property.position == null) {
                if (this.property.pageState == "next")//若是是最後一頁,禁用下一頁
                {
                    if (this.property.controlActionType == "css")
                        $("#" + this.property.nextControlID).css("display", "none");
                    if (this.property.controlActionType == "attr")
                        $("#" + this.property.nextControlID).attr("disabled", "disabled");
                }
                else if (this.property.pageState == "prev") {//若是是第一頁,禁用上一頁
                    if (this.property.controlActionType == "css")
                        $("#" + this.property.prevControlID).css("display", "none");
                    if (this.property.controlActionType == "attr")
                        $("#" + this.property.prevControlID).attr("disabled", "disabled");
                }
                else {//不足一頁數據,上一頁下一頁按鈕都禁用
                    if (this.property.controlActionType == "css") {
                        $("#" + this.property.prevControlID).css("display", "none");
                        $("#" + this.property.nextControlID).css("display", "none");
                    }
                    if (this.property.controlActionType == "attr") {
                        $("#" + this.property.prevControlID).attr("disabled", "disabled");
                        $("#" + this.property.nextControlID).attr("disabled", "disabled");
                    }
                }
                this.property.position = this.property.lastState;
            }
            else {
                if (this.property.pageIndex == 1) {//若是到第一頁，上一頁禁用
                    //刪除下一頁的禁用狀態
                    if (this.property.controlActionType == "css") {
                        $("#" + this.property.prevControlID).css("display", "none");
                        $("#" + this.property.nextControlID).css("display", "block");
                    }
                    if (this.property.controlActionType == "attr") {
                        $("#" + this.property.nextControlID).removeAttr("disabled");
                        $("#" + this.property.prevControlID).attr("disabled", "disabled");
                    }
                }
            }
        },
        isEmpty:function(value){
            if ($.trim(value).length != 0) {
                return false;
            }
            return true;
        }
    }

通過不少次的測試，終於再也不出bug。很好用的小插件。推薦各位博友。