jQuery插件pagination实现无刷新分页

 更新时间:2016年05月21日 10:45:41   投稿:lijiao  
本文我们一步一步看看使用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" 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框架后出错的解决方法

    引用jquery框架后出错的解决方法

    下面小编就为大家带来一篇引用jquery框架后出错的解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • jquery 键盘事件的使用方法详解

    jquery 键盘事件的使用方法详解

    这篇文章主要介绍了jquery 键盘事件的使用方法详解的相关资料,主要介绍keydown()、keyup()、keypress()等三种方法,需要的朋友可以参考下
    2017-09-09
  • jQuery实现信息提示框(带有圆角框与动画)效果

    jQuery实现信息提示框(带有圆角框与动画)效果

    这篇文章主要介绍了jQuery实现信息提示框效果,带有圆角框与动画功能,点击上面按钮实现对应文字的渐变显示效果,非常具有实用价值,需要的朋友可以参考下
    2015-08-08
  • jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)

    jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)

    这篇文章主要为大家详细介绍了Jquery+html5可设置闹钟并且会语音提醒的时钟特效,功能实现非常简单,推荐给大家,有需要的小伙伴可以参考下
    2015-08-08
  • jQuery实现鼠标点击处心形漂浮的炫酷效果示例

    jQuery实现鼠标点击处心形漂浮的炫酷效果示例

    这篇文章主要介绍了jQuery实现鼠标点击处心形漂浮的炫酷效果,涉及jQuery事件响应及页面元素属性动态变换相关操作技巧,需要的朋友可以参考下
    2018-04-04
  • 理解jquery事件冒泡

    理解jquery事件冒泡

    这篇文章主要介绍了jquery事件冒泡,以及如何阻止jQuery事件冒泡现象,感兴趣的朋友可以参考一下
    2016-01-01
  • jQuery学习笔记之回调函数

    jQuery学习笔记之回调函数

    回调函数就是一个通过函数指针调用的函数.这篇文章主要介绍了jQuery学习笔记之回调函数的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08
  • 实用jquery操作表单元素的简单代码

    实用jquery操作表单元素的简单代码

    下面小编就为大家带来一篇实用jquery操作表单元素的简单代码。小编觉得挺不错的, 现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • jQuery div拖拽用法实例

    jQuery div拖拽用法实例

    这篇文章主要介绍了jQuery div拖拽用法,以完整实例形式分析了jQuery结合UI插件实现拖拽功能的相关技巧,需要的朋友可以参考下
    2016-01-01
  • jQuery实现鼠标经过时出现隐藏层文字链接的方法

    jQuery实现鼠标经过时出现隐藏层文字链接的方法

    这篇文章主要介绍了jQuery实现鼠标经过时出现隐藏层文字链接的方法,涉及jQuery鼠标hover事件的响应及页面元素的动态处理技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10

最新评论