jQuery插件pagination实现无刷新分页


Posted in Javascript onMay 21, 2016

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

Javascript 相关文章推荐
高效率JavaScript编写技巧整理
Aug 23 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 Javascript
JS简单获取当前日期和农历日期的方法
Apr 17 Javascript
ES6 迭代器与可迭代对象的实现
Feb 11 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 Javascript
在pycharm中开发vue的方法步骤
Mar 04 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 #Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 #Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 #Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 #Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 #Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
May 20 #Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 #Javascript
You might like
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
jQuery的一些特性和用法整理小结
2010/01/13 Javascript
提升你网站水平的jQuery插件集合推荐
2011/04/19 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
Angular项目中$scope.$apply()方法的使用详解
2017/07/26 Javascript
微信小程序中时间戳和日期的相互转换问题
2018/07/09 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
js继承的这6种方式!(上)
2019/04/23 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
Python判断是否json是否包含一个key的方法
2018/12/31 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
Python bisect模块原理及常见实例
2020/06/17 Python
pycharm 2020.2.4 pip install Flask 报错 Error:Non-zero exit code的问题
2020/12/04 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
生物技术专业研究生自荐信
2013/09/22 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
统计员岗位职责
2015/02/11 职场文书
学校实习推荐信
2015/03/27 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书
纯CSS3实现div按照顺序出入效果
2021/07/15 HTML / CSS
如何在Python中妥善使用进度条详解
2022/04/05 Python