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实现的模拟QQ邮箱里的收件人选取及其他效果(一)
Jan 06 Javascript
js报错 Object doesn't support this property or method的原因分析
Mar 31 Javascript
jquery随意添加移除html的实现代码
Jun 21 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 Javascript
js轮播图的插件化封装详解
Jul 17 Javascript
JavaScript中Dom操作实例详解
Jul 08 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
JavaScript中展开运算符及应用的实例代码
Jan 14 Javascript
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
vue递归实现树形组件
Jul 15 Vue.js
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()与addclashes()函数的区别和比较
2013/06/24 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
PHP goto语句用法实例
2019/08/06 PHP
JS代码放在head和body中的区别分析
2011/12/01 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
vue实现修改图片后实时更新
2019/11/14 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
Python语言描述连续子数组的最大和
2018/01/04 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
python推导式的使用方法实例
2021/02/28 Python
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
乡镇四风对照检查材料
2014/08/31 职场文书
门卫岗位职责
2015/02/09 职场文书
历史博物馆观后感
2015/06/05 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers