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" onclick="GotoPage({{pageIndex - 1}},'{{url}}','{{callBack}}','{{orderByStr}}','{{keywords}}')"><a href="javascript:;">@*←*@ <span class="hidden-480">上一页</span></a></li>
{{/if}}

{{if pageNumIndex > 1}}
<li onclick="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 onclick="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" onclick="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" onclick="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有疑问的，请移步上边的链接。