jQuery插件pagination实现无刷新分页

前端之家收集整理的这篇文章主要介绍了jQuery插件pagination实现无刷新分页前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

这篇文章我们主要看看简单的使用jQuery pagination这个插件来实现无刷新分页,使用jQuery pagination主要作用在于分页样式的显示,而无刷新的主要原理还是使用Ajax,具体看下文:

首先,我们引入jQuery文件、jQuery pagination文件和jQuery Templates文件

接下来,先看看HTML标记,分别用来呈现数据项和分页样式显示,如下:

下边就需要取得我们所需要的数据了,如果你看过前两篇jQuery Templates的文章,你就会意识到我们需要返回javascript对象来进行数据的绑定,这里我们还是返回JSON。主要还是用拼串的形式最终返回如下JSON结构:

文章标题1","Url":"文章Url1","Subject":"文章概要1"},{"Title":"文章标题2","Url":"文章Url2","Subject":"文章概要2"},{"Title":"文章标题3","Url":"文章Url3","Subject":"文章概要3"} ] };

为了方便很多新学习JSON的朋友,在这里给出点后台输出JSON的C#代码,如下:

0) { StringBuilder strResult = new StringBuilder(); strResult.Append("{\"articlelist\":["); foreach (DataRow dr in dt.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"时,它就相当于一个对象数组,使得我们很容易的能绑定数据。下边是前台代码

分页事件 $("#Pagination").pagination(200,{ prev_text: "上一页",next_text: "下一页",num_edge_entries: 2,num_display_entries: 8,//回调 callback: pageselectCallback });

function pageselectCallback(page) {
var result = "";
$.ajax({
type: "post",dataType: "json",url: "getdata.aspx",//请求的url
data: { "page": parseInt(page + 1) },success: function (req) {
//使用微软jQuery Templates绑定数据列表,实现了HTML与js分离,使得页面整洁
$("#content-left").html($("#Template").render(req.articlelist));
}
});
}
});

这样,我们就使用jQuery pagination实现了无刷新分页,文中并没有过多的介绍jQuery pagination,而是将侧重点置于jQuery Templates的使用,但也希望对大家有一定的帮助。

原文链接:https://www.f2er.com/jquery/48577.html

猜你在找的jQuery相关文章