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在myeclipse中报错的解决方法
Oct 29 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
Mar 04 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
AngularJS中实现动画效果的方法
Jul 28 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 Javascript
Jil,高效的json序列化和反序列化库
Feb 15 Javascript
简单谈谈axios中的get,post方法
Jun 25 Javascript
JavaScript实现图片拖曳效果
Sep 08 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
JS动态显示倒计时效果
Dec 12 Javascript
javascript中的with语句学习笔记及用法
Feb 17 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
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)
2013/02/06 PHP
PHP Curl出现403错误的解决办法
2014/05/29 PHP
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
Js切换功能的简单方法
2010/11/23 Javascript
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
js自定义回调函数
2015/12/13 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
node app 打包工具pkg的具体使用
2019/01/17 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
django 自定义用户user模型的三种方法
2014/11/18 Python
Python字典操作简明总结
2015/04/13 Python
详解python中requirements.txt的一切
2017/03/03 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
python机器学习之神经网络实现
2018/10/13 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
python文件和文件夹复制函数
2020/02/07 Python
浅谈pytorch中的BN层的注意事项
2020/06/23 Python
意大利制造的男鞋和女鞋:SCAROSSO
2018/03/07 全球购物
Oracle快照(snapshot)
2015/03/13 面试题
函授大学生自我鉴定
2014/02/05 职场文书
意向书范本
2014/07/29 职场文书
白银帝国观后感
2015/06/17 职场文书
爱国影片观后感
2015/06/18 职场文书
毕业感言怎么写
2015/07/31 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书