jQuery插件pagination实现无刷新分页

前端技术 2023/09/02 JavaScript

这篇文章我们主要看看简单的使用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的使用，但也希望对大家有一定的帮助。

本文地址：https://www.stayed.cn/item/5862

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案