time 
设为首页】【收藏本站
当前位置: 主页 > JavaScript > Jquery > jQuery AJAX分页实例

jQuery AJAX分页实例

时间:2013-12-26 16:52 点击:4023次 字体:[ ]




查询功能是开发中最重要的一个功能,大量数据的显示,我们用的最多的就是分页。

  平时我们点击首页,下一页,上一页,尾页这些功能都是会引起页面回发的,也就是需要完全跟服务器进行交互,来回响应的时间,传输的数据量都是很大的。AJAX的分页可以很好的解决这些问题,本篇就是结合Jquery编写的分页实例

具体的步骤:

HTML页面中的JS如下

  1. <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>  
  2.     <script type="text/javascript">  
  3.         var pageIndex = 0;  
  4.         var pageSize = 10;  
  5.         $(function () {  
  6.             $("#btnSearch").click(function () {  
  7.                 /*  
  8.                 name  顾客的名字, 文本框中输入的内容  
  9.                 0         表示的是第1页  
  10.                 10       每页的大小  
  11.                 */ 
  12.                 var name = $("#txtSearch").val();  
  13.                 pageIndex = 0;  
  14.                 AjaxGetData(name, pageIndex, pageSize);  
  15.             });  
  16.         });  
  17.  
  18.         function AjaxGetData(name, index, size) {  
  19.             $.ajax({  
  20.                 url: "请求地址",  
  21.                 type: "Get",  
  22.                 data: "Name=" + name + "&PageIndex=" + index + "&PageSize=" + size,  
  23.                 dataType: "json",  
  24.                 success: function (data) {  
  25.                     var htmlStr = "";  
  26.                     htmlStr += "<table>" 
  27.                     htmlStr += "<thead>" 
  28.                     htmlStr += "<tr><td>CustomerID</td><td>CompanyName</td><td>ContactName</td><td>ContactTitle</td><td>Address</td><td>City</td></tr>" 
  29.                     htmlStr += "</thead>";  
  30.                     htmlStr += "<tbody>" 
  31.                     for (var i = 0; i < data.Customers.length; i++) {  
  32.                         htmlStr += "<tr>";  
  33.                         htmlStr += "<td>" + data.Customers[i].CustomerID + "</td>" 
  34.                                           + "<td>" + data.Customers[i].CompanyName + "</td>" 
  35.                                           + "<td>" + data.Customers[i].ContactName + "</td>" 
  36.                                           + "<td>" + data.Customers[i].ContactTitle + "</td>" 
  37.                                           + "<td>" + data.Customers[i].Address + "</td>" 
  38.                                           + "<td>" + data.Customers[i].City + "</td>" 
  39.                         htmlStr += "</tr>";  
  40.                     }  
  41.                     htmlStr += "</tbody>";  
  42.                     htmlStr += "<tfoot>";  
  43.                     htmlStr += "<tr>";  
  44.                     htmlStr += "<td colspan='6'>";  
  45.                     htmlStr += "<span>共有记录" + data.Count + ";共<span id='count'>" + (data.Count % 10 == 0 ? parseInt(data.Count / 10) : parseInt(data.Count / 10 + 1)) + "</span>页" + "</span>";  
  46.                     htmlStr += "<a href='javascript:void' onclick='GoToFirstPage()' id='aFirstPage' >首    页</a>   ";  
  47.                     htmlStr += "<a href='javascript:void' onclick='GoToPrePage()' id='aPrePage' >前一页</a>   ";  
  48.                     htmlStr += "<a href='javascript:void' onclick='GoToNextPage()' id='aNextPage'>后一页</a>   ";  
  49.                     htmlStr += "<a href='javascript:void' onclick='GoToEndPage()' id='aEndPage' >尾    页</a>   ";  
  50.                     htmlStr += "<input type='text' /><input type='button'  value='跳转' onclick='GoToAppointPage(this)' /> ";  
  51.                     htmlStr += "</td>";  
  52.                     htmlStr += "</tr>";  
  53.                     htmlStr += "</tfoot>";  
  54.                     htmlStr += "</table>";  
  55.  
  56.                     $("#divSearchResult").html(htmlStr);  
  57.                 },  
  58.                 error: function (XMLHttpRequest, textStatus, errorThrown) {  
  59.                     alert(XMLHttpRequest);  
  60.                     alert(textStatus);  
  61.                     alert(errorThrown);  
  62.                 }  
  63.             });  
  64.         }  
  65.         //首页  
  66.         function GoToFirstPage() {  
  67.             pageIndex = 0;  
  68.             AjaxGetData($("#txtSearch").val(), pageIndex, pageSize);  
  69.         }  
  70.         //前一页  
  71.         function GoToPrePage() {  
  72.             pageIndex -= 1;  
  73.             pageIndex = pageIndex >= 0 ? pageIndex : 0;  
  74.             AjaxGetData($("#txtSearch").val(), pageIndex, pageSize);  
  75.         }  
  76.         //后一页  
  77.         function GoToNextPage() {  
  78.             if (pageIndex + 1 < parseInt($("#count").text())) {  
  79.                 pageIndex += 1;  
  80.             }  
  81.                 AjaxGetData($("#txtSearch").val(), pageIndex, pageSize);  
  82.         }  
  83.         //尾页  
  84.         function GoToEndPage() {  
  85.             pageIndex = parseInt($("#count").text()) - 1;  
  86.             AjaxGetData($("#txtSearch").val(), pageIndex, pageSize);  
  87.         }  
  88.         //跳转  
  89.         function GoToAppointPage(e) {  
  90.             var page = $(e).prev().val();  
  91.             if (isNaN(page)) {  
  92.                 alert("请输入数字!");  
  93.             }  
  94.             else {  
  95.                 var tempPageIndex = pageIndex;  
  96.                 pageIndex = parseInt($(e).prev().val())-1;  
  97.                 if (pageIndex < 0 || pageIndex >= parseInt($("#count").text())) {  
  98.                     pageIndex = tempPageIndex;  
  99.                     alert("请输入有效的页面范围!");  
  100.                 }  
  101.                 else {  
  102.                     AjaxGetData($("#txtSearch").val(), pageIndex, pageSize);  
  103.                 }  
  104.             }  
  105.         }  
  106.     </script> 

  数据的传输用的JSON格式。大家知道JSON是轻量级别的数据传输。前台的展现时用的table。这样生成的HTML代码很简洁,而且不需要刷新页面,用户体验很好。

HTML页面的BODY内容如下:

  1. <div> 
  2. <input type="text" id="txtSearch" /> 
  3.         <input type="button" id="btnSearch" value="Search" /> 
  4.    </div> 
  5.    <div id="divSearchResult"> 
  6.  
  7.    </div> 
  8.  

注:别忘记加载Jquery库文件。



本文地址 : http://www.fengfly.com/plus/view-214382-1.html
标签: Ajax jquery 分页
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: