jQuery插件pagination实现无刷新分页
这篇文章我们主要看看简单的使用jQuerypagination这个插件来实现无刷新分页，使用jQuerypagination主要作用在于分页样式的显示，而无刷新的主要原理还是使用Ajax，具体看下文：
首先，我们引入jQuery文件、jQuerypagination文件和jQueryTemplates文件。
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <scriptsrc="http://www.jquery001.com/js/jquery.tmpl.js"type="text/javascript"></script> <scriptsrc="http://www.jquery001.com/js/jquery.pagination.js"type="text/javascript"></script>
接下来，先看看HTML标记，分别用来呈现数据项和分页样式显示，如下：
<!--显示列表-->
<divid="content-left"></div>
<!--分页样式显示-->
<divid="Pagination"class="pagination"></div>
<!--jQueryTemplates-->
<scriptid="Template"type="text/html">
<divclass="item">
<h3><ahref="${Url}"target="_blank">${Title}</a></h3>
<p>${Subject}</p>
</div>
</script>
下边就需要取得我们所需要的数据了，如果你看过前两篇jQueryTemplates的文章，你就会意识到我们需要返回javascript对象来进行数据的绑定，这里我们还是返回JSON。主要还是用拼串的形式最终返回如下JSON结构：
varreq={
"articlelist":
[
{"Title":"文章标题1","Url":"文章Url1","Subject":"文章概要1"},
{"Title":"文章标题2","Url":"文章Url2","Subject":"文章概要2"},
{"Title":"文章标题3","Url":"文章Url3","Subject":"文章概要3"}
]
};
为了方便很多新学习JSON的朋友，在这里给出点后台输出JSON的C#代码，如下：
if(dt!=null&&dt.Rows.Count>0)
{
StringBuilderstrResult=newStringBuilder();
strResult.Append("{\"articlelist\":[");
foreach(DataRowdrindt.Rows)
{
strResult.Append("{\"Title\":\""+dr["Title"].ToString()+"\",");
strResult.Append("\"Url\":\""+dr["Url"].ToString()+"\",");
strResult.Append("\"Subject\":\""+dr["Subject"].ToString()+"\"},");
}
//移除末尾','
strResult.Remove(strResult.Length-1,1);
strResult.Append("]}");
//输出json
Response.Write(strResult.ToString());
Response.End();
}
关于JSON本站中已经有很多次提到了，如果有不了解的可以找找。这样当我们使用"articlelist"时，它就相当于一个对象数组，使得我们很容易的能绑定数据。下边是前台代码：
$(document).ready(function(){
//TotalNum总数这里写死了
varTotalNum=200;
//首次加载
pageselectCallback(0);
//分页事件
$("#Pagination").pagination(200,{
prev_text:"上一页",
next_text:"下一页",
num_edge_entries:2,
num_display_entries:8,
//回调
callback:pageselectCallback
});
functionpageselectCallback(page){
varresult="";
$.ajax({
type:"post",
dataType:"json",
url:"getdata.aspx",//请求的url
data:{"page":parseInt(page+1)},
success:function(req){
//使用微软jQueryTemplates绑定数据列表,实现了HTML与js分离,使得页面整洁
$("#content-left").html($("#Template").render(req.articlelist));
}
});
}
});
这样，我们就使用jQuerypagination实现了无刷新分页，文中并没有过多的介绍jQuerypagination，而是将侧重点置于jQueryTemplates的使用，但也希望对大家有一定的帮助。