我们主要看看简单的使用jQuery pagination这个插件来实现无刷新分页，使用jQuery pagination主要作用在于分页样式的显示，而无刷新的主要原理还是使用Ajax。下边我们一步一步看看使用jQuery、JSON、Ajax和微 软jQuery Template插件组合实现jQuery 无刷新分页，希望能给你一些帮助。
先看看HTML标记，分别用来呈现数据项和分页样式显示，如下：
- <!--显示列表-->
- <div id="content-left"></div>
- <!--分页样式显示-->
- <div id="Pagination" class="pagination"></div>
- <!--jQuery Templates-->
- <script id="Template" type="text/html">
- <div class="item">
- <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的使用。因为本人觉得jQuery pagination还是很容易使用的，最终的效果可在Demo中看看。
