`
shonghuanc
  • 浏览: 84279 次
文章分类
社区版块
存档分类
最新评论

ajax div 分页

AjaxOracleLinuxSQL 
阅读更多
Ajax实现分页查询

[ 作者:  加入时间:2007-11-12 16:44:53  来自:Linux联盟收集整理 ]



xxlinux.com
由于查询返回的数据量很大，超过10w条数据，因此需要对页面查询功能进行优化。放弃原有程序中使用DataGrid的做法，自己编写分页显示模块。 yTPLinux联盟
   首先在页面上添加几个DIV: yTPLinux联盟
   yTPLinux联盟
   <div id="div_trackpoint" style=" border:solid 1px gray; height:230px; width:99%; overflow-y:auto;">用于显示查询回的数据</div> yTPLinux联盟
   <div id="div_trackpages" style=" height:15px; width:99%; font-size:8pt; word-break:break-all; word-wrap: break-word;">用于显示分页的页码</div><br /> yTPLinux联盟
   <div id="div_trackpagetab" style=" height:15px; width:99%; font-size:8pt; text-align:center;">用于显示前一页、后一页、...、首页、尾页等控制按钮</div> yTPLinux联盟
   <div id="div_trackpage_status" style=" height:20px; width:99%; font-size:8pt; text-align:center;">用于显示当前页的页码</div> yTPLinux联盟
   yTPLinux联盟
   实现客户端分页函数： yTPLinux联盟
   var CurPage=0; //当前页 yTPLinux联盟
   var TotalPage=0; //总页数 yTPLinux联盟
   var PageTab=7; //每组显示页数 yTPLinux联盟
   var CurTab=0; //当前分组 yTPLinux联盟
   yTPLinux联盟
   我的程序是设置每页显示50条数据，每组显示7页，这些可以按需求调整。 yTPLinux联盟
   yTPLinux联盟
   TurnTab函数用于切换分组，根据传入的val来计算显示哪一组页面。val=1表示切换到下一组，val=-1表示切换到上一组，0表示切换到第一组，-2表示切换到最后一组。用户通过单击页面上的 ... 符号来切换分组。 yTPLinux联盟
   yTPLinux联盟
  function TurnTab(val) yTPLinux联盟
  { yTPLinux联盟
   var nPage = 0; yTPLinux联盟
   yTPLinux联盟
   if (val == 1) { yTPLinux联盟
   CurTab++; yTPLinux联盟
   nPage = (CurTab - 1) * PageTab + 1; yTPLinux联盟
   } yTPLinux联盟
   else if (val == -1) { yTPLinux联盟
   CurTab--; yTPLinux联盟
   nPage = (CurTab - 1) * PageTab + 1; yTPLinux联盟
   } yTPLinux联盟
   else if (val == 0) { yTPLinux联盟
   CurTab = 1; yTPLinux联盟
   nPage = 1; yTPLinux联盟
   } yTPLinux联盟
   else if (val == -2) { yTPLinux联盟
   CurTab = Math.floor(TotalPage / PageTab) + 1; yTPLinux联盟
   nPage = (CurTab - 1) * PageTab + 1; yTPLinux联盟
   } yTPLinux联盟
   yTPLinux联盟
   var carinfo = document.getElementById("div_trackpages"); yTPLinux联盟
   var tabinfo = document.getElementById("div_trackpagetab"); yTPLinux联盟
   yTPLinux联盟
   var strInner = ""; yTPLinux联盟
   yTPLinux联盟
   strInner += "<a href=\"javascript:TurnPage(1)\">首页</a> "; yTPLinux联盟
   yTPLinux联盟
   strInner += "<a href=\"javascript:PreviousPage()\">前一页</a> "; yTPLinux联盟
   yTPLinux联盟
   strInner += "总共" + TotalPage + "页 "; yTPLinux联盟
   yTPLinux联盟
   strInner += "<a href=\"javascript:NextPage()\">下一页</a> "; yTPLinux联盟
   yTPLinux联盟
   strInner += "<a href=\"javascript:TurnPage(" + TotalPage + ")\">尾页</a> "; yTPLinux联盟
   yTPLinux联盟
   tabinfo.innerHTML = strInner; yTPLinux联盟
   yTPLinux联盟
   strInner = ""; yTPLinux联盟
   yTPLinux联盟
   if (CurTab > 1) strInner += "<a href=\"javascript:TurnTab(-1)\">...</a>  yTPLinux联盟
   yTPLinux联盟
  "; yTPLinux联盟
   yTPLinux联盟
   for ( ; nPage<=CurTab*PageTab; nPage++) { yTPLinux联盟
   yTPLinux联盟
   if (nPage <= TotalPage) { yTPLinux联盟
   yTPLinux联盟
   strInner += "<a href=\"javascript:TurnPage("+ nPage + ")\">"+nPage+"</a> " yTPLinux联盟
   yTPLinux联盟
   } yTPLinux联盟
   } yTPLinux联盟
   yTPLinux联盟
   if (nPage < TotalPage) strInner += "<a href=\"javascript:TurnTab(1)\">...</a> "; yTPLinux联盟
   yTPLinux联盟
   carinfo.innerHTML = strInner; yTPLinux联盟
   yTPLinux联盟
  } yTPLinux联盟
   yTPLinux联盟
   TurnPage函数用于切换分页，val表示要切换到的页数，根据要显示的页数生成查询范围，如查询前50条记录，从51到100的记录，从101到150的记录。。。 yTPLinux联盟
   cscCustomAnalyst是一个异步调用函数，函数实现的代码将在下面贴出。"Method","SID", "TIME1", "TIME2", "ROW1", "ROW2"都是执行查询所需的参数，Method是用来判断要执行什么查询，"ROW1", "ROW2"表示要查询的记录范围，其他的参数就根据实际需要进行调整。ShowCarTrack(val)是一个对查询结果进行处理的函数，异步调用完成后得到的结果就将在这个函数中分析处理并且显示。这部分代码按照具体实现编写，我这里就不列出。 yTPLinux联盟
   yTPLinux联盟
  function TurnPage(val) yTPLinux联盟
  { yTPLinux联盟
   if (Number(val) != CurPage) { yTPLinux联盟
   yTPLinux联盟
   CurPage = Number(val); yTPLinux联盟
   yTPLinux联盟
   var row1 = String((CurPage - 1) * 50 + 1); yTPLinux联盟
   var row2 = String(CurPage * 50); yTPLinux联盟
   yTPLinux联盟
   var trackinfo = document.getElementById("div_trackpoint"); yTPLinux联盟
   trackinfo.innerHTML = "　　获取数据中，请稍等．．．"; yTPLinux联盟
   yTPLinux联盟
   _cscCustomAnalyst(["Method", "SID", "TIME1", "TIME2", "ROW1", "ROW2"], yTPLinux联盟
   ["GetCarTrack",, "80100117", t1, t2, row1, row2], yTPLinux联盟
   ShowCarTrack,onQueryError); yTPLinux联盟
   yTPLinux联盟
   if (CurPage == 1) TurnTab(0); yTPLinux联盟
   yTPLinux联盟
   if (CurPage == TotalPage) TurnTab(-2); yTPLinux联盟
   yTPLinux联盟
   var statusinfo = document.getElementById("div_trackpage_status"); yTPLinux联盟
   yTPLinux联盟
   statusinfo.innerHTML = "第" + CurPage + "页"; yTPLinux联盟
   } yTPLinux联盟
   yTPLinux联盟
  } yTPLinux联盟
   yTPLinux联盟
   NextPage切换下一页，调用TurnPage实现，如果下一页超出当前分组则要切换到下一分组。 yTPLinux联盟
   yTPLinux联盟
  function NextPage() yTPLinux联盟
  { yTPLinux联盟
   if (CurPage < TotalPage) { yTPLinux联盟
   yTPLinux联盟
   TurnPage(CurPage+1); yTPLinux联盟
   yTPLinux联盟
   if ((CurPage + 1) > (CurTab * PageTab)) { yTPLinux联盟
   TurnTab(1); yTPLinux联盟
   } yTPLinux联盟
   } yTPLinux联盟
   yTPLinux联盟
  } yTPLinux联盟
   yTPLinux联盟
   PreviousPage切换上一页，调用TurnPage实现，如果上一页超出当前分组则要切换到上一分组。 yTPLinux联盟
  function PreviousPage() yTPLinux联盟
  { yTPLinux联盟
   if (CurPage > 1) { yTPLinux联盟
   yTPLinux联盟
   TurnPage(CurPage-1); yTPLinux联盟
   yTPLinux联盟
   if ((CurPage - 1) <= ((CurTab - 1) * PageTab)) { yTPLinux联盟
   TurnTab(-1); yTPLinux联盟
   } yTPLinux联盟
   yTPLinux联盟
   } yTPLinux联盟
  } yTPLinux联盟
   yTPLinux联盟
   _cscCustomAnalyst是异步调用函数，xhr.open("post","MapQuery.ashx", true);这段话是表示将请求提交到MapQuery.ashx这个页面。所有的服务器段数据库操作都在MapQuery.ashx里面执行。 yTPLinux联盟
   yTPLinux联盟
  function _cscCustomAnalyst(paramNames, paramValues, onComplete, onError){ yTPLinux联盟
   yTPLinux联盟
   var xhr=_GetXmlHttpRequest(); yTPLinux联盟
   yTPLinux联盟
   xhr.open("post","MapQuery.ashx", true); yTPLinux联盟
   yTPLinux联盟
   xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); yTPLinux联盟
   yTPLinux联盟
   xhr.onreadystatechange=function(){ yTPLinux联盟
   yTPLinux联盟
   var readyState=xhr.readyState; yTPLinux联盟
   yTPLinux联盟
   if (readyState==4){ yTPLinux联盟
   yTPLinux联盟
   var status=xhr.status; yTPLinux联盟
   yTPLinux联盟
   if(status==200){ yTPLinux联盟
   yTPLinux联盟
   var resultset = xhr.responseText; yTPLinux联盟
   yTPLinux联盟
   if(resultset == null){ yTPLinux联盟
   onComplete(null); yTPLinux联盟
   return; yTPLinux联盟
   } yTPLinux联盟
   yTPLinux联盟
   if(onComplete){ yTPLinux联盟
   onComplete(resultset); yTPLinux联盟
   resultset = null; yTPLinux联盟
   } yTPLinux联盟
   } yTPLinux联盟
   else{ yTPLinux联盟
   if(onError){ yTPLinux联盟
   onError(xhr.responseText); yTPLinux联盟
   } yTPLinux联盟
   } yTPLinux联盟
   yTPLinux联盟
   xhr.onreadystatechange = function(){}; yTPLinux联盟
   yTPLinux联盟
   xhr = null; yTPLinux联盟
   } yTPLinux联盟
   }; yTPLinux联盟
   yTPLinux联盟
   var paramString=null; yTPLinux联盟
   yTPLinux联盟
   if(paramNames&¶mNames.length>0){ yTPLinux联盟
   yTPLinux联盟
   var params = new Array(); yTPLinux联盟
   yTPLinux联盟
   while(paramNames&¶mNames.length>0) yTPLinux联盟
   { yTPLinux联盟
   params.push(paramNames.shift()+"="+_ToJSON(paramValues.shift())); yTPLinux联盟
   } yTPLinux联盟
   yTPLinux联盟
   paramString = params.join("&"); yTPLinux联盟
   yTPLinux联盟
   } yTPLinux联盟
   yTPLinux联盟
   xhr.send(paramString); yTPLinux联盟
  }; yTPLinux联盟
   yTPLinux联盟
   最后列出一个Oracle的按数量范围查询的SQL语句：(查询前50条记录) yTPLinux联盟
  SELECT * yTPLinux联盟
   FROM (SELECT /*+ FULL(tablename)*/ fieldname, ROWNUM rn FROM tablename WHERE condition AND ROWNUM <= 50 ORDER BY field DESC) t2 where t2.rn >= 1; yTPLinux联盟
xxlinux.com

分享到：
| 老婆送的生日礼物
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ajax的分页分页请求,通过ajax来分页

    **Ajax 分页请求详解** 在Web开发中，为了提高用户体验，我们经常需要实现页面内容的动态加载，而分页就是一种常见的数据展示方式。Ajax（Asynchronous JavaScript and XML）技术可以实现页面局部刷新，避免了整个...

    Ajax实现分页查询

    ### Ajax实现分页查询：深度解析与应用 在现代Web开发中，Ajax（Asynchronous JavaScript and XML）技术被广泛应用于创建动态网页应用，其核心优势在于可以在不重新加载整个页面的情况下，通过异步请求更新部分网页...

    ajax分页查询+Div透明遮盖

    在网页开发中，"Ajax分页查询+Div透明遮盖"是两个常见的技术点，用于提升用户体验和页面交互性。让我们分别深入探讨这两个概念。 **Ajax分页查询** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个...

    thinkphp+ajax无刷新分页

    这里`$counts`是数据库查询得到的总记录数，20表示每页显示的记录数，'type=1'是额外的URL参数，'ajax_div'和'ajax_page_div'分别是指定用于显示数据和分页链接的HTML元素ID。 2. **判断是否为AJAX请求**：在控制...

    ajax pro分页 非常标准的 写法 供学习

    在传统的网页分页中，用户点击分页按钮会触发整个页面的重新加载，而Ajax分页则仅请求并显示新分页的数据，保持页面其他部分的完整性。 二、实现原理 1. 用户交互：当用户点击分页按钮时，JavaScript事件监听器捕获...

    利用Ajax技术实现分页

    Ajax（Asynchronous JavaScript and XML）技术的引入，使得页面在不进行整个页面刷新的情况下实现分页，极大地提升了用户体验。本篇文章将深入探讨如何利用Ajax技术实现分页。 一、Ajax基础 Ajax的核心在于创建...

    AJAX分页技术

    AJAX（Asynchronous JavaScript and XML）分页技术是一种在网页不刷新的情况下，通过JavaScript与服务器进行异步数据交互，实现页面内容动态更新的方法。在网页应用中，分页通常用于处理大量数据，使得用户可以逐页...

    基于 jQuery 实现的 Ajax 异步分页

    1. **HTML结构**：首先，你需要在HTML页面中设置一个用于显示数据的容器，例如一个`&lt;div&gt;`，以及分页导航元素，如页码按钮。 2. **JavaScript初始化**：在JavaScript中，初始化分页参数，如每页显示的条目数量、...

    ajax实现分页

    ### 使用SSM框架中的Ajax实现自定义分页数据 在Web开发中，为了提升用户体验、减少服务器负担，分页功能的实现变得尤为重要。而在实际应用中，Ajax技术因其能够实现局部刷新、异步加载等功能而被广泛应用于动态加载...

    jquery ajax 分页 前端

    **jQuery AJAX 分页技术在前端应用详解** 在Web开发中，分页是一种常见的用户界面功能，用于处理大量数据的展示，提高页面加载速度并优化用户体验。本篇文章将深入探讨如何利用jQuery和AJAX技术实现纯前端的分页...

    ajax做的分页程序

    **Ajax 分页程序详解** Ajax（Asynchronous JavaScript and XML）技术是现代Web开发中的关键组成部分，它允许在不刷新整个页面的情况下与服务器进行交互，提高了用户体验。本篇将深入探讨如何利用Ajax实现一个分页...

    ajax实现分页jquery代码

    本教程将围绕“ajax实现分页jquery代码”这一主题，详细介绍如何使用Ajax和jQuery实现动态分页，并讨论如何调整CSS以优化样式。 首先，我们需要引入jQuery库和jQuery分页插件。在HTML文件中，添加以下链接和脚本...

    基于jquery的js+ajax分页控件

    **基于jQuery的JS+Ajax分页控件** 在Web开发中，数据的分页展示是一项基本功能，尤其在处理大量数据时，分页能够提高页面加载速度，优化用户体验。jQuery库提供了一种简单且强大的方式来实现AJAX分页，通过结合...

    jQuery Ajax分页插件(.Net示例)

    **jQuery Ajax分页插件.Net示例** 在Web开发中，分页是一种常见的用户界面功能，用于处理大量数据。jQuery是一个流行的JavaScript库，它提供了一系列API来简化DOM操作、事件处理以及与服务器的异步通信。jQuery ...

    jquery+ajax分页（新）

    **jQuery + AJAX 分页技术详解** 在Web开发中，分页是一种常见的数据展示方式，尤其在处理大量数据时，能够提高用户体验，避免一次性加载过多内容导致页面加载缓慢。本实例中，我们将深入探讨如何利用jQuery、AJAX...

    jQuery Ajax分页插件(jquery.pagination)

    2. **HTML结构**：创建一个容器元素，如`&lt;div&gt;`，用于展示分页组件。此外，还需要一个区域来显示分页的数据。 3. **初始化插件**：使用JavaScript或者jQuery来初始化分页插件。设置必要的配置参数，例如每页显示的...

    ajax div

    使用Ajax与DIV的一个常见场景是分页显示大量数据。例如，在一个新闻列表页面，我们可以只加载首屏数据，然后在用户滚动到底部时，通过Ajax请求加载更多内容，并将新数据插入到已有的&lt;div&gt;中。这种“无限滚动”效果在...

    Asp+AJAX静态分页 亲测 可用

    Asp+AJAX静态分页 亲测 可用 &lt;!...&lt;... &lt;head&gt; ... &lt;div id="left"&gt;Asp+AJAX静态分页&lt;/div&gt; &lt;div id="right"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="content"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;

    ajax+C# 无刷新分页控件

    C#编写的ajax无刷新分页控件。 NikeBoyAjaxPager就是新增的无刷新分页控件，同样支持任何数据控件，增加了一下属性： RequestPage：ajax请求页面，用于输入分页后的数据表格的html，这个页面需要额外添加，方法详见...

Magicbox
Global site tag (gtag.js) - Google Analytics