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 不能释放内存.
Sep 07 Javascript
DWZ table的原生分页浅谈
Mar 01 Javascript
js简单实现用户注册信息的校验代码
Nov 15 Javascript
JS+CSS实现下拉列表框美化效果(3款)
Aug 15 Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 Javascript
微信小程序 支付后台java实现实例
May 09 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 Javascript
优雅的在React项目中使用Redux的方法
Nov 10 Javascript
vue实现点击追加选中样式效果
Nov 01 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 Javascript
vue+Element-ui实现登录注册表单
Nov 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
php面向对象的方法重载两种版本比较
2008/09/08 PHP
解析php下载远程图片函数 可伪造来路
2013/06/25 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
JS运行耗时操作的延时显示方法
2010/11/19 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
Vue中使用Sortable的示例代码
2018/04/07 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
VUE项目axios请求头更改Content-Type操作
2020/07/24 Javascript
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
python杀死一个线程的方法
2015/09/06 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
python 文件转成16进制数组的实例
2018/07/09 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
django 实现简单的插入视频
2020/04/07 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
Python基于execjs运行js过程解析
2020/11/27 Python
公务员职务工作的自我评价
2013/11/01 职场文书
经典演讲稿开场白
2014/08/25 职场文书
倡议书的写法
2014/08/30 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
2015年元旦标语大全
2014/12/09 职场文书
欢迎词范文
2015/01/27 职场文书
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题