紧接着上篇—分页技术原理与实现(二)——Java+Oracle实现,本篇继续分析分页技术。上篇讲的是分页技术的代码实现,这篇继续分析一下分页技术的效果控制。

上篇已经用代码简单的实现了一个分页。但是我们都看到,代码中每次通过servlet请求取得结果集后,都会转向到一个jsp页面显示结果,这样每次查询页面都会刷新一下,比如查询出现结果集后要查看第三页,页面就会刷新一下。这样页面给人的效果感觉就会有点不舒服,所以我们希望能够在通过条件查询结果集后无论访问哪一页,页面都不会刷新,而只是结果集变化。要解决这个,我想大家很容易就会想到Ajax了。

是啊,这就要请Ajax出山了。当通过查询条件查询到结果集后,以后每次访问任何一页都通过Ajax来访问,使用异步Ajax与Servlet进行交互,将结果查询出来返回给Ajax,这样页面内容因为Ajax返回结果而改变,而页面却不会刷新,这就实现了无刷新的分页技术。

下面我们来看一个简单的无刷新分页实现,代码如下:

[xhtml] view plain copy
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en">
  3. head>
  4. Metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  5. linkrel="stylesheet"href="../lib/jquery_pagination/pagination.css"mce_href="lib/jquery_pagination/pagination.css"/>
  6. mce:scripttype="text/javascript"src="../lib/jquery/jquery.min.js"mce_src="lib/jquery/jquery.min.js"></mce:scriptmce:scripttype="text/javascript"
  7. src="../lib/jquery_pagination/jquery.pagination.js"mce:scripttype="text/javascript"><!--
  8. /**
  9. *Callbackfunctionthatdisplaysthecontent.
  10. *
  11. *Getscalledeverytimetheuserclicksonapaginationlink.
  12. *
  13. *@param{int}page_indexNewPageindex
  14. *@param{jQuery}jqthecontainerwiththepaginationlinksasajQueryobject
  15. */
  16. functionpageselectCallback(page_index,jq){
  17. varnew_content=$('#hiddenresultdiv.result:eq('+page_index+')')
  18. .clone();
  19. $('#Searchresult').empty().append(new_content);
  20. returnfalse;
  21. }
  22. functioninitPagination(){
  23. varnum_entries=$('#hiddenresultdiv.result').length;
  24. //Createpaginationelement
  25. $("#Pagination").pagination(num_entries,{
  26. num_edge_entries:2,
  27. num_display_entries:8,
  28. callback:pageselectCallback,
  29. items_per_page:1
  30. });
  31. }
  32. //WhentheHTMLhasloaded,callinitPaginationtopaginatetheelements
  33. $(document).ready(function(){
  34. initPagination();
  35. });
  36. //-->
  37. mce:styletype="text/css"><!--
  38. *{
  39. padding:0;
  40. margin:0;
  41. }
  42. body{
  43. background-color:#fff;
  44. margin:20px;
  45. padding:0;
  46. height:100%;
  47. font-family:Arial,Helvetica,sans-serif;
  48. }
  49. #Searchresult{
  50. margin-top:15px;
  51. margin-bottom:15px;
  52. border:solid1px#eef;
  53. padding:5px;
  54. background:#eef;
  55. width:40%;
  56. }
  57. #Searchresultp{
  58. margin-bottom:1.4em;
  59. }
  60. --mce:stylestyletype="text/css"mce_bogus="1">*{
  61. padding:0;
  62. margin:0;
  63. }
  64. body{
  65. background-color:#fff;
  66. margin:20px;
  67. padding:0;
  68. height:100%;
  69. font-family:Arial,sans-serif;
  70. }
  71. #Searchresult{
  72. margin-top:15px;
  73. margin-bottom:15px;
  74. border:solid1px#eef;
  75. padding:5px;
  76. background:#eef;
  77. width:40%;
  78. }
  79. #Searchresultp{
  80. margin-bottom:1.4em;
  81. }styletitle>Paginationbodyh4>
  82. jQueryPaginationPluginDemo
  83. >
  84. divid="Pagination"class="pagination"divbrstyle="clear:both;"mce_style="clear:both;"divid="Searchresult">
  85. Thiscontentwillbereplacedwhenpaginationinits.
  86. >
  87. divid="hiddenresult"style="display:none;"mce_style="display:none;"divclass="result"p>
  88. Globallymaximizegranular"outsidetheBox"thinkingvis-a-vis
  89. qualityniches.Proactivelyformulate24/7resultswhereas2.0
  90. catalystsforchange.Professionallyimplement24/365nichesrather
  91. thanclient-focusedusers.
  92. >
  93. Competentlyengineerhigh-payoff"outsidetheBox"thinkingthrough
  94. crossfunctionalbenefits.Proactivelytransitionintermandated
  95. processesthroughopen-sourceniches.Progressivelyengage
  96. maintainableinnovationandextensibleinterfaces.
  97. >
  98. Crediblyfabricatee-businessmodelsforend-to-endniches.
  99. Compellinglydisseminateintegratede-marketswithoutubiquitous
  100. services.Crediblycreateequityinvestedchannelswith
  101. multidisciplinaryhumancapital.
  102. >
  103. Interactivelyintegratecompetitiveusersratherthanfullytested
  104. infomediaries.Seamlesslyinitiatepremiumfunctionalitiesrather
  105. thanimpactfularchitectures.RapidiouslyLeverageexisting
  106. resource-levelingprocessesviauser-centricportals.
  107. >
  108. Monotonectallyinitiateuniquee-servicesvis-a-visclient-centric
  109. deliverables.QuicklyimpactparallelopportunitieswithB2B
  110. bandwidth.Synergisticallystreamlineclient-focused
  111. infrastructuresratherthanB2Ce-commerce.
  112. >
  113. Phosfluorescentlyfabricate24/365e-businessthrough24/365total
  114. linkage.Completelyfacilitatehigh-qualitysystemswithout
  115. stand-alonestrategicthemeareas.
  116. html>

这就是一个非常简单的无刷新分页实现,使用了JQuery+ jquery.pagination框架。现在随着框架的流行,尤其是Jquery的流行,使用框架来开发是非常有效的。上面代码原理在代码中已有注释,也可参考Jquery的官方网站:。

现在就可以来开发我们的Ajax无刷新分页实现。基于上面的原理,在响应页码被按下的代码中pageselectCallback(),我们使用一个Ajax异步访问数据库,通过点击的页号将结果集取出后再用异步设置到页面,这样就可以完成了无刷新实现。

页码被按下的响应函数pageselectCallback()修改如下:

这样就可以用异步方式获取结果,用showResponse函数来处理结果了,showResponse函数如下:

[javascript]
  • functionshowResponse(request){
  • varcontent=request;
  • varroot=content.documentElement;
  • varresponseNodes=root.getElementsByTagName("root");
  • varitemList=newArray();
  • varPagelist=newArray();
  • alert(responseNodes.length);
  • if(responseNodes.length>0){
  • varresponseNode=responseNodes[0];
  • varitemNodes=responseNode.getElementsByTagName("data");
  • for(vari=0;i<itemNodes.length;i++){
  • varidNodes=itemNodes[i].getElementsByTagName("id");
  • varnameNodes=itemNodes[i].getElementsByTagName("name");
  • varsexNodes=itemNodes[i].getElementsByTagName("sex");
  • varageNodes=itemNodes[i].getElementsByTagName("age");
  • if(idNodes.length>0&&nameNodes.length>0&&sexNodes.length>0&&ageNodes.length>0){
  • varid=idNodes[0].firstChild.nodeValue;
  • varname=nameNodes[0].firstChild.nodeValue;
  • varsex=sexNodes[0].firstChild.nodeValue;
  • varage=ageNodes[0].firstChild.nodeValue;
  • itemList.push(newArray(id,name,sex,age));
  • }
  • }
  • varpageNodes=responseNode.getElementsByTagName("pagination");
  • if(pageNodes.length>0){
  • vartotalNodes=pageNodes[0].getElementsByTagName("total");
  • varstartNodes=pageNodes[0].getElementsByTagName("start");
  • varendNodes=pageNodes[0].getElementsByTagName("end");
  • varcurrentNodes=pageNodes[0].getElementsByTagName("pageno");
  • if(totalNodes.length>0&&startNodes.length>0&&endNodes.length>0){
  • vartotal=totalNodes[0].firstChild.nodeValue;
  • varstart=startNodes[0].firstChild.nodeValue;
  • varend=endNodes[0].firstChild.nodeValue;
  • varcurrent=currentNodes[0].firstChild.nodeValue;
  • Pagelist.push(newArray(total,start,end,current));
  • }
  • }
  • }
  • showTable(itemList,Pagelist);
  • }
  • 如上代码就是用来处理通过Ajax异步请求Servlet后返回的XML格式的结果,其中Servlet代码在上篇中。其中itemList、Pagelist分别是解析返回后生成的用户List和分页导航,这样用户就可以以自己的展现方式展现数据了。

  • functionpageselectCallback(page_index,jq){
  • varpars="pageNo="+(page_index+1);
  • $.ajax({
  • type:"POST",
  • url:"UserBasicSearchServlet",
  • cache:false,
  • data:pars,
  • success:showResponse
  • });
  • returnfalse;
  • }
  • 总结

    以上是DEVMAX为你收集整理的分页技术原理与实现(三)——无刷新的Ajax分页技术全部内容。

    如果觉得DEVMAX网站内容还不错,欢迎将DEVMAX网站推荐给好友。

    分页技术原理与实现(三)——无刷新的Ajax分页技术的更多相关文章

    1. 基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能

      这篇文章主要介绍了基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能,需要的朋友可以参考下

    2. HTML5 图片悬停放大的实现代码示例

      这篇文章主要介绍了HTML5 图片悬停放大的实现代码示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    3. ios – UIScrollView的平滑自定义分页

      我在UIScrollView中有两个(可能更多)视图,并希望使用分页.当我尝试使用UIScrollView的默认分页选项时出现问题,因为视图具有不同的宽度,无法正确分页.所以我已经实现了一个有效的自定义分页代码.但是,当滚动较慢时,它不会按预期运行.(它回到没有动画的原始位置.)以下是我目前通过uiscrollviewdelegate进行自定义分页的方法我想要的是:是)我有的:解决方法尝试下面的自

    4. ios – 使用子视图控制器分页滚动视图

      使用分页实现水平滚动视图的最佳做法是什么,每页有一个视图控制器?由于iOS5具有用于视图控制器容器/包含的API,因此PageControl示例仍然是实现此功能的最佳方式吗?

    5. 可可触摸 – 启用预览和分页的UICollectionView

      在AppStore中显示搜索结果时,我正在尝试模仿苹果公司的功能.(参考:http://searchengineland.com/apple-app-search-shows-only-one-result-at-a-time-133818)它显示像卡中的详细应用程序信息,并且它被分页.当中间的一个活动卡片和滚动视图的分页行为仍然完整时,我被困在如何使上一张和第二张卡片显示.我已经尝试使用UICo

    6. iOS 8 autolayout,VFL和margin等于或大于

      这是一个错误还是我做错了?

    7. ios – Multiline UILabel?

      我需要插入UILabel多行文本.我做以下事情:arrEx由两个项组成,因此它应该是两个字符串.但是UITableViewCell只包含第一个字符串.在IB中,我将UILabelcell.exsInfoLabel的行数设置为0.解决方法试试这个:

    8. ios – 启用了内容插入的UIScrollView分页工作很奇怪

      我创建了具有内容插入的UIScrollView.第一次,scrollView.contentOffset.x为-160.0但是奇怪的问题是当我点击scrollView(黄色区域)时,内容偏移x值将重置为0并显示为这样.我尝试过几次,但是点击滚动视图会将内容偏移量重置为0.我该如何防止这种情况?解决方法UIScrollView分页通过滚动与scrollView宽度相同的页面(在您的情况下为480个宽

    9. 应用程序关闭时的iOS任务

      我正在构建一个应用程序,通过ajax将文件上传到服务器.问题是用户很可能有时不会有互联网连接,并且客户希望在用户重新连接时安排ajax调用.这可能是用户在离线时安排文件上传并关闭应用程序.应用程序关闭时可以进行ajax调用吗?

    10. UIKit框架-高级控件Swift版本: 10.UIWebView方法/属性详解

      前面我们已经讲解完了UINavigationController的一些常用属性以及方法,现在让我们来看看一个关于网络的UIWebView.1.UIWebView的常用属性常用类型2.UIWebView的代理方法3.代码示范首先我们要使用storyBoard布局界面关联控件遵守代理协议自定义UIWebVIew实现代理方法在ViewDidLoad方法中实现PS:UIWebView继承与UIView,并

    随机推荐

    1. xe-ajax-mock 前端虚拟服务

      最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

    2. vue 使用 xe-ajax

      安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

    3. AJAX POST数据中文乱码解决

      前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

    4. Koa2框架利用CORS完成跨域ajax请求

      实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

    5. form提交时,ajax上传文件并更新到&lt;input&gt;中的value字段

    6. ajax的cache作用

      filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

    7. 浅谈ajax上传文件属性contentType = false

      默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

    8. 909422229_ajaxFileUpload上传文件

      ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

    9. AJAX-Cache:一款好用的Ajax缓存插件

      原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

    10. jsf – Ajax update/render在已渲染属性的组件上不起作用

      我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

    返回
    顶部