jQuery插件pagination实现无刷新分页_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" 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
无刷新
jquery无刷新分页插件、pagination分页 刷新、pagination分页插件、jq分页插件pagination、js分页插件pagination，以便于您获取更多的相关知识。