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下判断IE与FF的比较简单的方式
Oct 17 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
javascript定义变量时带var与不带var的区别分析
Jan 12 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
Javascript循环删除数组中元素的几种方法示例
May 18 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
Aug 15 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
Nov 16 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
WINXP下apache+php4+mysql
2006/11/25 PHP
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
php判断两个浮点数是否相等的方法
2015/03/14 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
js类的静态属性和实例属性的理解
2009/10/01 Javascript
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
浅析js中substring和substr的方法
2015/11/09 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
Python导入txt数据到mysql的方法
2015/04/08 Python
Python smallseg分词用法实例分析
2015/05/28 Python
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
Python抓取框架 Scrapy的架构
2016/08/12 Python
Python递归函数定义与用法示例
2017/06/02 Python
OpenCV HSV颜色识别及HSV基本颜色分量范围
2019/03/22 Python
python关于倒排列的知识点总结
2020/10/13 Python
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
竞聘书怎么写,如何写?
2014/03/31 职场文书
校运会口号
2014/06/18 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS