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 相关文章推荐
jquery ajax 同步异步的执行示例代码
Jun 23 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
Jan 15 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
jQuery选择器源码解读(七):elementMatcher函数
Mar 31 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
详解JavaScript对象和数组
Dec 03 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
vue项目中实现的微信分享功能示例
Jan 21 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 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 addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
浅谈php冒泡排序
2014/12/30 PHP
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
js常用代码段整理
2011/11/30 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
js取模(求余数)隔行变色
2014/05/15 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
bootstrap组件之按钮式下拉菜单小结
2017/01/19 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
Python 开发Activex组件方法
2009/11/08 Python
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
使用pdb模块调试Python程序实例
2015/06/02 Python
解析Python中的__getitem__专有方法
2016/06/27 Python
Python实现多并发访问网站功能示例
2017/06/19 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
Python中的元组介绍
2019/01/28 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
python实现输入三角形边长自动作图求面积案例
2020/04/12 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
HTML5图片预览实例分享
2014/06/04 HTML / CSS
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
环保小标语
2014/06/13 职场文书
支行行长竞聘报告
2014/11/06 职场文书
2014年新教师工作总结
2014/11/08 职场文书
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL