jQuery插件pagination实现无刷新分页


这篇文章我们主要看看简单的使用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的使用,但也希望对大家有一定的帮助。



相关阅读:
java利用Ant脚本生成war包全过程
Win10 Mobile 10586.107怎么更新?Lumia950/XL/550可升级
jQuery DataTables插件自定义Ajax分页实例解析
win10旧版本软件安装失败提示"不能执行临时目录中的文件"的两种解决办法
部分Win10用户吐槽:电量消耗变快、发热加剧
Win10控制面板中某些项打不开该怎么办?
Win10系统磁盘多出两个小人图标怎么删除?
JS判断、校验MAC地址的2个实例
正则表达式(语法篇推荐)
Json序列化和反序列化方法解析
深入解读CSS的OOCSS和SMACSS以及BEM
EasyUI在表单提交之前进行验证的实例代码
JavaScript中的Math.SQRT1_2属性使用简介
详解C++中对构造函数和赋值运算符的复制和移动操作
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 市“十二五”规划编制工作方案 新时期应有新的调解理念 描写老师的好句——搞笑篇 《在红尘的最深处等你》第四十三章 关于成长的句子_关于成长的优美疼痛句子_关于成长的名言佳句 只要坚持,就能成功 桂花树作文900字 最独特的精彩600字 【阮泊人诗歌】米场,可爱的家乡! 2013年11月入党申请书范文 小学六年级作文650字:奥运畅想曲 乡镇书记农村公路建设先进事迹材料 劳动好快乐350字 青石板还铺在小路上,回不去的是当年。 三万活动驻村优秀干部事迹材料 会议的构成要素有哪些? 春节对联繁体字 “商品文学”论700字 作文 预言 冬日感言 关于国庆节的手抄报资料:国庆节历史由来 开心春雨作文600字 那一种心悸作文1800字 冬天的银杏树作文 情感日志 眼前的人才是最值得珍惜的 大学农业银行实习周记范文1000字 励志英语句子 坚持高标准推进基层建设争做基层基础管理样板队 调查报告的实例一 南盟的发展进程及发展前景 我的天空、少了你,我还能飞翔?、 来往于生命中的人 咱们工人有力量 歌词 串词 朗诵词 初三600字军训作文篇论创新 四季的感动作文1900字 我爱的海星作文500字 举世瞩目反义词_举世瞩目近义词 雪中漫步作文600字 描写桃花的优美散文 初中初一作文650字:小鸟报恩 程炳浩创办开心网的几个小插曲 读《詹天佑》有感作文1100字 一个走运的人 在市财税系统调研时的讲话 请好好珍惜自己的女友 赞美山茶花的句子 多丽(寿刘帅) 得到幸福 高中高三作文1500字:人生永远的彩虹 诚信 优美亲情散文-孝心

Copyright © 2016 phpStudy |