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控制显示服务器生成的图片流
Aug 04 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
Bootstrap框架下下拉框select搜索功能
Mar 26 Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 Javascript
JS去掉字符串中所有的逗号
Oct 18 Javascript
解决vue-router中的query动态传参问题
Mar 20 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
javascript设计模式 ? 观察者模式原理与用法实例分析
Apr 22 Javascript
JavaScript Event Loop相关原理解析
Jun 10 Javascript
vue 实现超长文本截取,悬浮框提示
Jul 29 Javascript
jQuery实现图片切换效果
Oct 19 jQuery
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
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
php时间不正确的解决方法
2008/04/09 PHP
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python字符串连接方式汇总
2014/08/21 Python
python获取android设备的GPS信息脚本分享
2015/03/06 Python
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
Python实现对象转换为xml的方法示例
2017/06/08 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
python设置表格边框的具体方法
2020/07/17 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
给排水工程师岗位职责
2013/11/21 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
小学班主任研修日志
2015/11/13 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
python urllib库的使用详解
2021/04/13 Python
各种货币符号快捷输入
2022/02/17 杂记
Java 多线程协作作业之信号同步
2022/05/11 Java/Android