Web列表分頁--(單頁web)容易上手的方法

列表是後臺管理中經常用到的，爲了提高效率，我們需要將它進行分頁獲取，接下來講一下自己將常用的一套寫法，其中用到了template.js這個輪子，可以參考我的另一篇文章：template.js插件--好用的模板插件看下具體用法。

1，控制器裏需要寫一個分頁獲取的Action

public JsonResult List(int numPerPage = 10, int currentPage = 1, string orderField = "", string keyword = "")
        {
            //構造參數-whereStr-orderByStr
            int id = 1;
            string whereStr = "";
            string orderByStr = "";
            string keywords = "";
            Model.*** model = BLL.GetModel(id);
            //whereStr = string.Format(" IsDelete=0 and UserID={0}", user.ID);
            if (!string.IsNullOrEmpty(keyword))
            {
                keywords = keyword;
                whereStr += string.Format("Name like '%{0}%'", keyword);
            }
            if (!string.IsNullOrEmpty(orderField))
            {
                orderByStr = orderField;
                //orderByStr = " IsTop DESC,IsRecommend DESC,AddTime DESC";
            }
            else
            {
                orderByStr = " IsDelete DESC,CreateTime DESC";
            }

            int recoudCount = *BLL.GetRecordCount(whereStr);

            DataSet ds = *BLL.GetListByPage(whereStr, orderByStr, (numPerPage * (currentPage - 1) + 1), numPerPage * currentPage);

            IList<Model.***> list = new List<Model.***>();
            if (ds.Tables[0].Rows.Count > 0)
            {
                list = *BLL.DataTableToList(ds.Tables[0]);
            }
            return Json(new
            {
                statusCode = 200,
                RecordCount = recoudCount,
                List = list,
                url = "/Order/OrderList/",
                callBack = "OrderList",orderByStr=orderByStr,
                keywords = keywords
            });
        }

2，html中的寫法

<a href="/***/****/" data-callback="****">

3，js函數是這樣寫的：

var pageIndex = 1;
var pageSize = 8;
var pageNumSize = 5;
var isLoading = false;
showPage($(this).find("a").attr("href"), $(this).find("a").attr('data-callback'));
function showPage(url, callback, orderField, keywords) {
        if (isLoading) {
            return false;
        }
        isLoading = true;
        $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            data: { "numPerPage": pageSize, "currentPage": pageIndex, "orderField": orderField, "keyword": keywords },
            success: function (res) {
                var callback1 = eval(callback);
                if (typeof callback1 == "function") {
                    callback1(res);
                }
            },
            error: function (res) {
                noty({ text: "系統異常，請稍後重試！", type: "warning", layout: "topCenter", timeout: 3000 });
            },
            complete: function () {
                isLoading = false;
            }
        });
    }

4，回調函數是這樣寫的:

function GoodsList(data) {
    if (data.statusCode == 200) {
        var html = template("jsGoodsList", data);
        $("#mainContent").html(html);
    }
    else {
        noty({ text: errorMsg, type: "error", layout: "topCenter", timeout: 3000 });
    }
    getSplitPage(data, "jsSplitPage", $("#GoodsListSplitPageDiv"));
}

5,getSplitPage寫法：

var getSplitPage = function (data, templateID, container) {
    if (data.statusCode == 200) {
        if (data.List.length > 0) {
            var pageCount = Math.ceil(data.RecordCount / pageSize);
            var startIndex = (pageSize * (pageIndex - 1) + 1);
            var endIndex = startIndex + data.List.length - 1;

            var pageNumCount = Math.ceil(pageCount / pageNumSize);
            var pageNumIndex = Math.ceil(pageIndex / pageNumSize);
            var pages = [];

            for (var i = pageNumSize * (pageNumIndex - 1) + 1; i <= pageCount && i <= pageNumSize * pageNumIndex; i++) {
                pages.push(i);
            }
            html = template(templateID, {
                "startIndex": startIndex,
                "endIndex": endIndex,
                "pageCount": pageCount,
                "pageIndex": pageIndex,
                "pages": pages,
                "pageNumCount": pageNumCount,
                "pageNumIndex": pageNumIndex,
                "pageNumSize": pageNumSize,
                "recordCount":data.RecordCount,
                "url": data.url,
                "callBack": data.callBack,"orderByStr" : data.orderByStr,
                "keywords": data.keywords
            });
        }
        else {
            html = template(templateID, {
                "startIndex": 0,
                "endIndex": 0,
                "pageCount": 0,
                "pageIndex": 0,
                "pages": [],
                "pageNumCount": 0,
                "pageNumIndex": 0,
                "pageNumSize": 0
            });
        }
    }
    else {
        html = template(templateID, {
            "startIndex": 0,
            "endIndex": 0,
            "pageCount": 0,
            "pageIndex": 0,
            "pages": [],
            "pageNumCount": 0,
            "pageNumIndex": 0,
            "pageNumSize": 0
        });
    }
    $(container).html(html);
}

6，其中的JsSplitePage模板寫法：

<script id="jsSplitPage" type="text/html">
    <div class="span6">
        <div class="dataTables_info" id="sample_editable_1_info" style="padding-top: 8px;">從 第{{startIndex}}條 到 第{{endIndex}}條  共有{{recordCount}}條</div>
    </div>
    <div class="span6">
        <div class="dataTables_paginate paging_bootstrap pagination" style="margin: 0; float: right;">
            <ul>
                {{if pageIndex <= 1}}
            <li class="prev disabled"><a href="javascript:;">@*←*@ <span class="hidden-480">上一頁</span></a></li>
                {{else}}
            <li class="prev" οnclick="GotoPage({{pageIndex - 1}},'{{url}}','{{callBack}}','{{orderByStr}}','{{keywords}}')"><a href="javascript:;">@*←*@ <span class="hidden-480">上一頁</span></a></li>
                {{/if}}

        {{if pageNumIndex > 1}}
            <li οnclick="GotoPage({{(pageNumIndex - 1) * pageNumSize}},'{{url}}','{{callBack}}','{{orderByStr}}','{{keywords}}')"><a href="javascript:void(0);"><span class="hidden-480">...</span></a></li>
                {{/if}}

        {{each pages as item i}}
            {{if item == pageIndex}}
                  <li class="active"><a href="javascript:;">{{item}}</a></li>
                {{else}}
                  <li οnclick="GotoPage({{item}},'{{url}}','{{callBack}}','{{orderByStr}}','{{keywords}}')"><a href="javascript:GotoPage({{item}},'{{url}}','{{callBack}}','{{orderByStr}}','{{keywords}}');">{{item}}</a></li>
                {{/if}}
        {{/each}}

        {{if pageNumIndex < pageNumCount}}
            <li class="next" οnclick="GotoPage({{pageNumIndex * pageNumSize + 1}},'{{url}}','{{callBack}}','{{orderByStr}}','{{keywords}}')"><a href="javascript:;"><span class="hidden-480">...</span></a></li>
                {{/if}}
        {{if pageIndex >= pageCount}}
            <li class="next disabled"><a href="javascript:;"><span class="hidden-480">下一頁</span> @*→*@ </a></li>
                {{else}}
            <li class="next" οnclick="GotoPage({{pageIndex + 1}},'{{url}}','{{callBack}}','{{orderByStr}}','{{keywords}}')"><a href="javascript:;"><span class="hidden-480">下一頁</span> @*→*@ </a></li>
                {{/if}}
            </ul>
        </div>
    </div>
</script>

注：其中的類名都是Bootstrap的，上邊用到的noty是一個提醒插件，感興趣的可以去看看，說不定有驚喜哦！

7，GoToPage的方法：

function GotoPage(index, url, callBack, orderField, keywords) {
        pageIndex = index;
        showPage(url, callBack, orderField, keywords);
    }

8，涉及到搜索的話就用下邊的方法：

function Sarech(url, callback, orderField, keywordID) {
        var keyword = $("#" + keywordID).val();
        showPage(url, callback, orderField, keyword);
    }

9,涉及到點擊排序就調用下邊方法：

function orderField(url, callback, orderField, keywords) {
        pageIndex = 1;
        showPage(url, callback, orderField, keywords);
    }

只要把它放到相應的標籤裏就Ok！

對template.js有疑問的，請移步上邊的鏈接。