| 标题 | jQuery插件pagination实现无刷新分页 |
| 内容 | 本文我们一步一步看看使用jQuery、JSON、Ajax和微软jQuery Template插件组合实现jQuery无刷新分页，希望能给你一些帮助，感兴趣的朋友可以参考一下 这篇文章我们主要看看简单的使用jQuery pagination这个插件来实现无刷新分页，使用jQuery pagination主要作用在于分页样式的显示，而无刷新的主要原理还是使用Ajax，具体看下文： 首先，我们引入jQuery文件、jQuery pagination文件和jQuery Templates文件。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script src="http://www.jquery001.com/js/jquery.tmpl.js" type="text/javascript"></script> <script src="http://www.jquery001.com/js/jquery.pagination.js" type="text/javascript"></script> 接下来，先看看HTML标记，分别用来呈现数据项和分页样式显示，如下： <!--显示列表--> <div id="content-left"></div> <!--分页样式显示--> <div id="Pagination"></div> <!--jQuery Templates--> <script id="Template" type="text/html"> <div> <h3><a href="${Url}" target="_blank">${Title}</a></h3> <p>${Subject}</p> </div> </script> 下边就需要取得我们所需要的数据了，如果你看过前两篇jQuery Templates的文章，你就会意识到我们需要返回javascript对象来进行数据的绑定，这里我们还是返回JSON。主要还是用拼串的形式最终返回如下JSON结构： var req={ "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) { 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"时，它就相当于一个对象数组，使得我们很容易的能绑定数据。下边是前台代码： $(document).ready(function () { //TotalNum 总数 这里写死了 var TotalNum = 200; //首次加载 pageselectCallback(0); //分页事件 $("#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的使用，但也希望对大家有一定的帮助。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。