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的使用,但也希望对大家有一定的帮助。