主要实现 ajax分页功能 
效果图

后台方法代码展示

  1.  /// <summary>
  2.     /// WebAjax处理类
  3.     /// </summary>
  4.     public class WebAjaxHandler : IHttpHandler, IRequiresSessionState
  5.     {
  6.         /// <summary>
  7.         /// 实例可再次使用，则为 true；否则为 false。
  8.         /// </summary>
  9.         public bool IsReusable
  10.         {
  11.             get { return true; }
  12.         }
  13.  
  14.         /// <summary>
  15.         /// 当前Session
  16.         /// </summary>
  17.         protected HttpSessionState Session
  18.         {
  19.             get
  20.             {
  21.                 return HttpContext.Current.Session;
  22.             }
  23.         }
  24.  
  25.         /// <summary>
  26.         /// 当前Application
  27.         /// </summary>
  28.         protected HttpApplicationState Application
  29.         {
  30.             get
  31.             {
  32.                 return HttpContext.Current.Application;
  33.             }
  34.         }
  35.  
  36.         /// <summary>
  37.         /// 通过实现 System.Web.IHttpHandler 接口的自定义 HttpHandler 启用 HTTP Web 请求的处理。
  38.         /// </summary>
  39.         /// <param name="context">它提供对用于为 HTTP 请求提供服务的内部服务器对象（如 Request、Response、Session和 Server）的引用。</param>
  40.         public void ProcessRequest(HttpContext context)
  41.  
  42.   ....................具体代码请下载demo
  1.  /// <summary>
  2.     /// PagingHandler 的摘要说明
  3.     /// </summary>
  4.     public class PagingHandler : WebAjaxHandler
  5.     {
  6.         public object Paging(Pagination pagination)
  7.         {
  8.             //分页为测试数据 数据库分页自行实现
  9.             var list = new List<Model>();
  10.             for (int i = ; i < ; i++)
  11.             {
  12.                 list.Add(new Model { Id = i, Name = "name" + i, Age = i, Address = "address" + i, Mobile = "", Height = i, Weight = i, Remark ="格斯达克沙地上多空双方的伤口附近的客服电话开机"});
  13.             }
  14.             var startRow = (pagination.PageIndex - ) * pagination.PageSize;
  15.             var endRow = pagination.PageIndex * pagination.PageSize;
  16.             pagination.RowCount = list.Count;
  17.             return new
  18.             {
  19.                 Data = list.Take(endRow).Skip(startRow),
  20.                 Pagination = pagination
  21.             };
  22.         }
  23.     }

纯VUE

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>.net ajax 分页</title>
  6.     <link href="../css/style.css" rel="stylesheet" />
  7.     <script src="../js/jquery-1.7.2.min.js"></script>
  8.     <script src="../js/vue.min.js"></script>
  9. </head>
  10. <body>
  11.     <div id="app">
  12.         <div class="table column">
  13.             <table>
  14.                 <thead>
  15.                     <tr>
  16.                         <th>Id</th>
  17.                         <th>名字</th>
  18.                         <th>年龄</th>
  19.                         <th>地址</th>
  20.                         <th>手机</th>
  21.                         <th>身高</th>
  22.                         <th>体重</th>
  23.                         <th>备注</th>
  24.                         <th>操作</th>
  25.                     </tr>
  26.                 </thead>
  27.                 <tbody>
  28.                     <tr v-for="item in sites">
  29.                         <td>{{item.Id}}</td>
  30.                         <td>{{item.Name}}</td>
  31.                         <td>{{item.Age}}</td>
  32.                         <td>{{item.Address}}</td>
  33.                         <td>{{item.Mobile}}</td>
  34.                         <td>{{item.Height}}</td>
  35.                         <td>{{item.Weight}}</td>
  36.                         <td>{{item.Remark}}</td>
  37.                         <td>
  38.                             <a href='javascript:operation(${Id});'>操作</a>
  39.                         </td>
  40.                     </tr>
  41.                 </tbody>
  42.             </table>
  43.         </div>
  44.         <div v-show="dataCount > 0">
  45.             <div class="dataPager">
  46.                 <template v-show="pageIndex > 1">
  47.                     <a v-on:click="goPage(1)">首页</a>
  48.                     <a v-on:click="goPage(pageIndex - 1)">上一页</a>
  49.                 </template>
  50.                 <span>
  51.                     <template v-for="item in pageSizeArray">
  52.                         <a v-if="item.isFirst == true" id="pager_lbPage{{item.value}}" disabled="disabled" class="yemaa" style="margin-left: 5px; margin-right: 5px; text-decoration: none;">{{item.value}}</a>
  53.                         <a v-else="item.isFirst == false" v-on:click="goPage(item.value)" style="margin-left: 5px; margin-right: 5px; text-decoration: none;">{{item.value}}</a>
  54.                     </template>
  55.                 </span>
  56.                 <span v-show="pageIndex < pageCount">
  57.                     <a v-on:click="goPage(pageIndex + 1)">下一页</a>
  58.                     <a v-on:click="goPage(pageCount)">末页</a>
  59.                 </span>
  60.             </div>
  61.         </div>
  62.     </div>
  63. </body>
  64. </html>
  65. <script>
  66.     var vm = new Vue({
  67.         el: '#app',
  68.         data: {
  69.             pageSize: 10,  //页码
  70.             pageIndex: 1, //当前页
  71.             dataCount: 0,//总条数
  72.             sites: [],      //数据
  73.             pageCount: 0   //总页数
  74.         },
  75.         computed: {
  76.             // 分页数据
  77.             pageSizeArray: function () {
  78.                 var array = new Array();
  79.                 var index = this.pageIndex;
  80.                 var size = this.pageSize;
  81.                 for (var i = index - 4; i <= index + 4; i++) {
  82.                     if (i === index) {
  83.                         array.push({ isFirst: true, value: i });
  84.                     } else if (i > 0 && i <= size) {
  85.                         array.push({ isFirst: false, value: i });
  86.                     }
  87.                 }
  88.                 return array;
  89.             }
  90.         },
  91.         // 数据初次加载
  92.         mounted: function () {
  93.             this.queryPaging(1, this.pageSize);
  94.         },
  95.         methods: {
  96.             // 分页事件
  97.             goPage: function (pageIndex) {
  98.                 this.queryPaging(pageIndex, this.pageSize);
  99.             },
  100.             // 分页查询调侃
  101.             getQueryPagination: function (pageIndex, pageSize) {
  102.                 return { "PageSize": pageSize, "PageIndex": pageIndex, "GetRowCount": true };
  103.             },
  104.             // 分页数据绑定
  105.             bindData: function (self, data) {
  106.                 var d = data.Data;
  107.                 self.pageSize = data.Pagination.PageSize;
  108.                 self.pageIndex = data.Pagination.PageIndex;
  109.                 self.dataCount = data.Pagination.RowCount;
  110.                 self.pageCount = parseInt((self.dataCount + self.pageSize - 1) / self.pageSize);
  111.                 for (var i = 0; i < d.length; i++) {
  112.                     self.$set(vm.sites, i, d[i]);
  113.                 }
  114.             },
  115.             // 分页ajax
  116.             queryPaging: function (pageIndex, pageSize) {
  117.                 var self = this;
  118.                 if (!pageIndex) {
  119.                     pageIndex = 1;
  120.                 }
  121.                 pageSize = pageSize || 10;
  122.                 var pagination = this.getQueryPagination(pageIndex, pageSize);
  123.                 var parameters = JSON.stringify({ "pagination": pagination });
  124.                 $.ajax({
  125.                     type: "POST",
  126.                     url: "/ajax/PagingHandler.ashx/Paging",
  127.                     data: parameters,
  128.                     contentType: "application/json; charset=utf-8",
  129.                     dataType: "json",
  130.                     async: true,
  131.                     success: function (d) {
  132.                         self.bindData(self, d);
  133.                     },
  134.                     timeout: 30000,
  135.                     error: function (e) {
  136.                         if (e.responseText === "") return;
  137.                         if (e.status === 300) {
  138.                             if (JSON.parse(e.responseText) === "RequireLogon") {
  139.                                 return;
  140.                             } else if (JSON.parse(e.responseText) === "Unauthorized") {
  141.                                 return;
  142.                             }
  143.                         } else if (e.status === 401 && e.statusText === "Unauthorized") {
  144.                             return;
  145.                         }
  146.                         if (e.statusText === "timeout") {
  147.                             alert("服务器忙");
  148.                         } else if (e) {
  149.                             alert(e.responseText);
  150.                         }
  151.                     }
  152.                 });
  153.             }
  154.         }
  155.     });
  156. </script>

vue 替换jquerytemplate

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>.net ajax 分页</title>
  6.     <link href="../css/style.css" rel="stylesheet" />
  7.     <script src="../js/jquery-1.7.2.min.js"></script>
  8.     <script src="../js/vue.min.js"></script>
  9.     <script src="../ajax/PagingHandler.ashx"></script>
  10. </head>
  11. <body>
  12.     <div id="content" class="table column">
  13.         <table>
  14.             <thead>
  15.                 <tr>
  16.                     <th>Id</th>
  17.                     <th>名字</th>
  18.                     <th>年龄</th>
  19.                     <th>地址</th>
  20.                     <th>手机</th>
  21.                     <th>身高</th>
  22.                     <th>体重</th>
  23.                     <th>备注</th>
  24.                     <th>操作</th>
  25.                 </tr>
  26.             </thead>
  27.             <tbody id="app">
  28.                 <template v-for="item in sites">
  29.                     <tr>
  30.                         <td>{{item.Id}}</td>
  31.                         <td>{{item.Name}}</td>
  32.                         <td>{{item.Age}}</td>
  33.                         <td>{{item.Address}}</td>
  34.                         <td>{{item.Mobile}}</td>
  35.                         <td>{{item.Height}}</td>
  36.                         <td>{{item.Weight}}</td>
  37.                         <td>{{item.Remark}}</td>
  38.                         <td>
  39.                             <a href='javascript:operation(${Id});'>操作</a>
  40.                         </td>
  41.                     </tr>
  42.                 </template>
  43.             </tbody>
  44.         </table>
  45.     </div>
  46.     <div id="pager"></div>
  47. </body>
  48. </html>
  49. <script>
  50.     /*
  51.    jauery js分页函数
  52.    container：分页容器jquery对象
  53.    pageIndex：当前页码
  54.    pageSize：页大小
  55.    dataCount：总页数
  56.    pageChangedCallback：页面单击回调函数
  57.    */
  58.     function drawPagination(container, pageIndex, pageSize, dataCount, pageChangedCallback) {
  59.         if (dataCount > 0) {
  60.             var pageCount = parseInt((dataCount + pageSize - 1) / pageSize);
  61.             var contents = new Array();
  62.             contents.push('<div class="dataPager clearfix">');
  63.             if (pageIndex > 1) {
  64.                 contents.push('<a id="pager_lbnFirst" value=1>首页</a>');
  65.                 contents.push('<a id="pager_lbnPrev" value=' + (pageIndex - 1) + '>&lt; 上一页</a>');
  66.             }
  67.             contents.join('<span id="pPages">');
  68.             for (var i = pageIndex - 4; i <= pageIndex + 4; i++) {
  69.                 if (i === pageIndex) {
  70.                     contents.push('<a id="pager_lbPage' + i + '" disabled="disabled" class="yemaa" style="margin-left:5px;margin-right:5px;text-decoration:none;">' + i + '</a>');
  71.                 } else if (i > 0 && i <= pageCount) {
  72.                     contents.push('<a id="pager_lbPage' + i + '" value=' + i + ' style="margin-left:5px;margin-right:5px;">' + i + '</a>');
  73.                 }
  74.             }
  75.             contents.join('</span>');
  76.             if (pageIndex < pageCount) {
  77.                 contents.push('<a id="pager_lbnNext" value=' + (pageIndex + 1) + '>下一页 &gt;</a>');
  78.                 contents.push('<a id="pager_lbnLast" value=' + pageCount + '>末页</a>');
  79.             }
  80.             contents.push('共 <span id="pager_lblTotalCount">' + dataCount);
  81.             contents.push('</span> 条 每页 <span id="pager_lblPageSize">' + pageSize);
  82.             contents.push('</span> 条 第 <span id="lblCurrentPage">' + pageIndex + '</span> / <span id="pager_lblTotalPage">' + pageCount + '</span> 页</div>');
  83.             container.html(contents.join(''));
  84.             if (pageChangedCallback) {
  85.                 $("a", container).click(function () {
  86.                     var self = $(this);
  87.                     if (!self.attr("disabled")) {
  88.                         pageChangedCallback(parseInt(self.attr("value")));
  89.                     }
  90.                 });
  91.             }
  92.             container.show();
  93.         } else {
  94.             container.html('');
  95.             container.hide();
  96.         }
  97.     }
  98.  
  99.     function getQueryOrdersPagination(pageIndex, pageSize) {
  100.         return { "PageSize": pageSize, "PageIndex": pageIndex, "GetRowCount": true };
  101.     }
  102.  
  103.     var vm = null;
  104.     function bindData(data) {
  105.         var d = data.Data;
  106.         if (vm === null) {
  107.             vm = new Vue({
  108.                 el: '#app',
  109.                 data: { sites: d }
  110.             });
  111.         } else {
  112.             for (var i = 0; i < d.length; i++) {
  113.                 vm.$set(vm.sites, i, d[i]);
  114.                 // Vue.set(vm.sites, i, d[i]);
  115.             }
  116.         }
  117.         drawPagination($("#pager"), data.Pagination.PageIndex, data.Pagination.PageSize, data.Pagination.RowCount, queryOrders);
  118.     }
  119.  
  120.     function queryOrders(pageIndex, pageSize) {
  121.         if (!pageIndex) pageIndex = 1;
  122.         pageSize = pageSize || 10;
  123.         var pagination = getQueryOrdersPagination(pageIndex, pageSize);
  124.         $.net.PagingHandler.Paging(pagination, function (data) {
  125.             bindData(data);
  126.         }, function (e) {
  127.             if (e.statusText === "timeout") {
  128.                 alert("服务器忙");
  129.             } else {
  130.                 alert(e.responseText);
  131.             }
  132.         });
  133.         return false;
  134.     }
  135.  
  136.     window.onload = function () {
  137.         queryOrders(1, 10);
  138.     };
  139. </script>

.net嵌入脚本实现如下：

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>.net ajax 分页</title>
  6.     <link href="../css/style.css" rel="stylesheet" />
  7.     <script src="../js/jquery-1.7.2.min.js"></script>
  8.     <script src="../js/jquerytemplate.js"></script>
  9.     <script src="../ajax/PagingHandler.ashx"></script>
  10.     <!--jquery template-->
  11.     <script type="text/x-jquery-tmpl" id="temp">
  12.         <tr>
  13.             <td>${Id}</td>
  14.             <td>${Name}</td>
  15.             <td>${Age}</td>
  16.             <td>${Address}</td>
  17.             <td>${Mobile}</td>
  18.             <td>${Height}</td>
  19.             <td>${Weight}</td>
  20.             <td>${Remark}</td>
  21.             <td>
  22.                 <a href='javascript:operation(${Id});'>操作</a>
  23.             </td>
  24.         </tr>
  25.     </script>
  26. </head>
  27. <body>
  28.     <div id="content" class="table column">
  29.         <table>
  30.             <thead>
  31.                 <tr>
  32.                     <th>Id</th>
  33.                     <th>名字</th>
  34.                     <th>年龄</th>
  35.                     <th>地址</th>
  36.                     <th>手机</th>
  37.                     <th>身高</th>
  38.                     <th>体重</th>
  39.                     <th>备注</th>
  40.                     <th>操作</th>
  41.                 </tr>
  42.             </thead>
  43.             <tbody></tbody>
  44.         </table>
  45.     </div>
  46.     <div id="pager"></div>
  47. </body>
  48. </html>
  49. <script>
  50.     /*
  51.    jauery js分页函数
  52.    container：分页容器jquery对象
  53.    pageIndex：当前页码
  54.    pageSize：页大小
  55.    dataCount：总页数
  56.    pageChangedCallback：页面单击回调函数
  57.    */
  58.     function drawPagination(container, pageIndex, pageSize, dataCount, pageChangedCallback) {
  59.         if (dataCount > 0) {
  60.             var pageCount = parseInt((dataCount + pageSize - 1) / pageSize);
  61.             var contents = new Array();
  62.             contents.push('<div class="dataPager clearfix">');
  63.             if (pageIndex > 1) {
  64.                 contents.push('<a id="pager_lbnFirst" value=1>首页</a>');
  65.                 contents.push('<a id="pager_lbnPrev" value=' + (pageIndex - 1) + '>&lt; 上一页</a>');
  66.             }
  67.             contents.join('<span id="pPages">');
  68.             for (var i = pageIndex - 4; i <= pageIndex + 4; i++) {
  69.                 if (i === pageIndex) {
  70.                     contents.push('<a id="pager_lbPage' + i + '" disabled="disabled" class="yemaa" style="margin-left:5px;margin-right:5px;text-decoration:none;">' + i + '</a>');
  71.                 } else if (i > 0 && i <= pageCount) {
  72.                     contents.push('<a id="pager_lbPage' + i + '" value=' + i + ' style="margin-left:5px;margin-right:5px;">' + i + '</a>');
  73.                 }
  74.             }
  75.             contents.join('</span>');
  76.             if (pageIndex < pageCount) {
  77.                 contents.push('<a id="pager_lbnNext" value=' + (pageIndex + 1) + '>下一页 &gt;</a>');
  78.                 contents.push('<a id="pager_lbnLast" value=' + pageCount + '>末页</a>');
  79.             }
  80.             contents.push('共 <span id="pager_lblTotalCount">' + dataCount);
  81.             contents.push('</span> 条 每页 <span id="pager_lblPageSize">' + pageSize);
  82.             contents.push('</span> 条 第 <span id="lblCurrentPage">' + pageIndex + '</span> / <span id="pager_lblTotalPage">' + pageCount + '</span> 页</div>');
  83.             container.html(contents.join(''));
  84.             if (pageChangedCallback) {
  85.                 $("a", container).click(function () {
  86.                     var self = $(this);
  87.                     if (!self.attr("disabled")) {
  88.                         pageChangedCallback(parseInt(self.attr("value")));
  89.                     }
  90.                 });
  91.             }
  92.             container.show();
  93.         } else {
  94.             container.html('');
  95.             container.hide();
  96.         }
  97.     }
  98.  
  99.     function getQueryOrdersPagination(pageIndex, pageSize) {
  100.         return { "PageSize": pageSize, "PageIndex": pageIndex, "GetRowCount": true };
  101.     }
  102.  
  103.     function bindData(data) {
  104.         $("#content table tbody").html($("#temp").tmpl(data.Data));
  105.         drawPagination($("#pager"), data.Pagination.PageIndex, data.Pagination.PageSize, data.Pagination.RowCount, queryOrders);
  106.     }
  107.  
  108.     function queryOrders(pageIndex, pageSize) {
  109.         if (!pageIndex) pageIndex = 1;
  110.         pageSize = pageSize || 10;
  111.         var pagination = getQueryOrdersPagination(pageIndex, pageSize);
  112.         $.net.PagingHandler.Paging(pagination, function (data) {
  113.             bindData(data);
  114.         }, function (e) {
  115.             if (e.statusText === "timeout") {
  116.                 alert("服务器忙");
  117.             } else {
  118.                 alert(e.responseText);
  119.             }
  120.         });
  121.         return false;
  122.     }
  123.  
  124.     window.onload = function () {
  125.         queryOrders(1, 10);
  126.     };
  127. </script>

纯JS实现 代码如下:

  1.  <!DOCTYPE html>
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.      <title>纯js分页</title>
  6.      <link href="../css/style.css" rel="stylesheet" />
  7.  </head>
  8.  <body>
  9.      <div id="content" class="table column">
  10.      </div>
  11.      <div id="pager"></div>
  12.  </body>
  13.  </html>
  14.  <script>
  15.  
  16.      /*创建XMLHttpRequest*/
  17.      function createXMLHttpRequest() {
  18.          var xmlHttp;
  19.          try {
  20.              xmlHttp = new XMLHttpRequest();
  21.          } catch (e) {
  22.              try {
  23.                  xmlHttp = new ActiveXObject("MSXML2.xmlHttp");
  24.              } catch (e) {
  25.                  try {
  26.                      xmlHttp = new ActiveXObject("Microsoft.xmlHttp");
  27.                  } catch (e) {
  28.                      alert("你的浏览器不支持xmlHttp对象，请升级到IE6以上版本！");
  29.                      xmlHttp = false;
  30.                  }
  31.              }
  32.          }
  33.          var me = this;
  34.          this.Method = "POST";
  35.          this.Url = "";
  36.          this.Async = true;
  37.          this.Arg = "";
  38.          this.ContentType = "application/x-www-form-urlencoded";
  39.          this.Accept = "";
  40.          this.CallBack = function () { };
  41.          this.Loading = function () { };
  42.          this.Error = function () { };
  43.  
  44.          this.Send = function () {
  45.              try {
  46.                  if (this.Url == "") {
  47.                      return false;
  48.                  }
  49.                  if (!xmlHttp) {
  50.                  }
  51.                  xmlHttp.open(this.Method, this.Url, this.Async);
  52.                  if (this.Method == "POST") {
  53.                      xmlHttp.setRequestHeader("Content-Type", me.ContentType);
  54.                      if (this.Accept != "") {
  55.                          xmlHttp.setRequestHeader("Accept", me.Accept);
  56.                      }
  57.                  }
  58.                  xmlHttp.onreadystatechange = function () {
  59.                      if (xmlHttp.readyState == 4) {
  60.                          var result = false;
  61.                          if (xmlHttp.status == 200) {
  62.                              result = xmlHttp.responseText;
  63.                          }
  64.                          xmlHttp = null;
  65.  
  66.                          me.CallBack(result);
  67.                      }
  68.                      else {
  69.                          me.Loading();
  70.                      }
  71.                  }
  72.                  if (this.Method == "POST") {
  73.                      xmlHttp.send(this.Arg);
  74.                  }
  75.                  else {
  76.                      xmlHttp.send(null);
  77.                  }
  78.              } catch (ex) {
  79.                  me.Error(ex);
  80.              }
  81.              return false;
  82.          }
  83.      }
  84.  
  85.      /*创建发送请求*/
  86.      function sendPostRequest(targetUrl, parameters, successCallback, errorCallback) {
  87.          var ajax = new createXMLHttpRequest();
  88.          ajax.Method = "POST";
  89.          ajax.ContentType = "application/json; charset=utf-8;";
  90.          ajax.Accept = "application/json, text/javascript, */*; q=0.01";
  91.          ajax.Url = targetUrl;
  92.          ajax.Async = true;
  93.          ajax.Arg = parameters;
  94.          ajax.CallBack = successCallback;
  95.          ajax.Error = errorCallback;
  96.          ajax.Send();
  97.      }
  98.  
  99.      /*渲染分页控件*/
  100.      function drawPagination(container, pageIndex, pageSize, dataCount) {
  101.          if (dataCount > 0) {
  102.              var pageCount = parseInt((dataCount + pageSize - 1) / pageSize);
  103.              var contents = new Array();
  104.              contents.push('<div class="dataPager clearfix">');
  105.              if (pageIndex > 1) {
  106.                  contents.push('<a id="pager_lbnFirst" value="1" onclick="queryOrders(1)">首页</a>');
  107.                  contents.push('<a id="pager_lbnPrev" value=' + (pageIndex - 1) + ' onclick="queryOrders(' + (pageIndex - 1) + ')">&lt; 上一页</a>');
  108.              }
  109.              contents.join('<span id="pPages">');
  110.              for (var i = pageIndex - 4; i <= pageIndex + 4; i++) {
  111.                  if (i == pageIndex) {
  112.                      contents.push('<a id="pager_lbPage' + i + '" disabled="disabled" class="yemaa" style="margin-left:5px;margin-right:5px;text-decoration:none;">' + i + '</a>');
  113.                  } else if (i > 0 && i <= pageCount) {
  114.                      contents.push('<a id="pager_lbPage' + i + '" value=' + i + ' onclick="queryOrders(' + (i) + ')" style="margin-left:5px;margin-right:5px;">' + i + '</a>');
  115.                  }
  116.              }
  117.              contents.join('</span>');
  118.              if (pageIndex < pageCount) {
  119.                  contents.push('<a id="pager_lbnNext" value=' + (pageIndex + 1) + ' onclick="queryOrders(' + (pageIndex + 1) + ')">下一页 &gt;</a>');
  120.                  contents.push('<a id="pager_lbnLast" value=' + pageCount + '  onclick="queryOrders(' + pageCount + ')" >末页</a>');
  121.              }
  122.              contents.push('共 <span id="pager_lblTotalCount">' + dataCount);
  123.              contents.push('</span> 条 每页 <span id="pager_lblPageSize">' + pageSize);
  124.              contents.push('</span> 条 第 <span id="lblCurrentPage">' + pageIndex + '</span> / <span id="pager_lblTotalPage">' + pageCount + '</span> 页</div>');
  125.              container.innerHTML = contents.join('');
  126.              container.style.display = "block";
  127.          } else {
  128.              container.innerHTML = "";
  129.              container.style.display = "none";
  130.          }
  131.      }
  132.  
  133.      /*构建分页参数*/
  134.      function getQueryOrdersPagination(pageIndex, pageSize) {
  135.          return { "PageSize": pageSize, "PageIndex": pageIndex, "GetRowCount": true };
  136.      }
  137.  
  138.      /*绑定页面数据*/
  139.      function bindData(data) {
  140.          var html = new Array();
  141.          var json = eval("(" + data + ")");
  142.          var d = json.Data;
  143.          html.push("<table>");
  144.          html.push("<tr><th>Id</th><th>名字</th><th>年龄</th><th>地址</th><th>手机</th><th>身高</th><th>体重</th><th>备注</th><th>操作</th></tr>");
  145.          for (var i = 0; i < d.length; i++) {
  146.              html.push(" <tr>");
  147.              html.push("<td>" + d[i].Id + "</td>");
  148.              html.push("<td>" + d[i].Name + "</td>");
  149.              html.push("<td>" + d[i].Age + "</td>");
  150.              html.push("<td>" + d[i].Address + "</td>");
  151.              html.push("<td>" + d[i].Mobile + "</td>");
  152.              html.push("<td>" + d[i].Height + "</td>");
  153.              html.push("<td>" + d[i].Weight + "</td>");
  154.              html.push("<td>" + d[i].Remark + "</td>");
  155.              html.push("<td><a href='javascript:operation(${Id});'>操作</a></td>");
  156.              html.push(" </tr>");
  157.          }
  158.          html.push("</table>");
  159.          document.getElementById("content").innerHTML = html.join("");
  160.          drawPagination(document.getElementById("pager"), json.Pagination.PageIndex, json.Pagination.PageSize, json.Pagination.RowCount);
  161.      }
  162.  
  163.      /*执行查询*/
  164.      function queryOrders(pageIndex, pageSize) {
  165.          if (!pageIndex) pageIndex = 1;
  166.          pageSize = pageSize || 10;
  167.          var pagination = getQueryOrdersPagination(pageIndex, pageSize);
  168.          var parameters = JSON.stringify({ "pagination": pagination });
  169.          sendPostRequest("/ajax/PagingHandler.ashx/Paging", parameters, function (data) {
  170.              bindData(data);
  171.          }, function (e) {
  172.              if (e.statusText == "timeout") {
  173.                  alert("服务器忙");
  174.              } else {
  175.                  alert(e.responseText);
  176.              }
  177.          });
  178.          return false;
  179.      }
  180.  
  181.      /*初始化*/
  182.      window.onload = function () {
  183.          queryOrders(1, 10);
  184.      };
  185.  </script>

jquery实现代码如下

  1.  <!DOCTYPE html>
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.      <title>jquery ajax 分页</title>
  6.      <link href="../css/style.css" rel="stylesheet" />
  7.      <script src="../js/jquery-1.7.2.min.js"></script>
  8.      <script src="../js/jquerytemplate.js"></script>
  9.      <!--jquery template-->
  10.      <script type="text/x-jquery-tmpl" id="temp">
  11.          <tr>
  12.              <td>${Id}</td>
  13.              <td>${Name}</td>
  14.              <td>${Age}</td>
  15.              <td>${Address}</td>
  16.              <td>${Mobile}</td>
  17.              <td>${Height}</td>
  18.              <td>${Weight}</td>
  19.              <td>${Remark}</td>
  20.              <td>
  21.                  <a href='javascript:operation(${Id});'>操作</a>
  22.              </td>
  23.      </tr>
  24.  </script>
  25.  </head>
  26.  <body>
  27.      <div id="content" class="table column">
  28.          <table>
  29.              <thead>
  30.                  <tr>
  31.                      <th>Id</th>
  32.                      <th>名字</th>
  33.                      <th>年龄</th>
  34.                      <th>地址</th>
  35.                      <th>手机</th>
  36.                      <th>身高</th>
  37.                      <th>体重</th>
  38.                      <th>备注</th>
  39.                      <th>操作</th>
  40.                  </tr>
  41.              </thead>
  42.              <tbody></tbody>
  43.          </table>
  44.      </div>
  45.      <div id="pager"></div>
  46.  </body>
  47.  </html>
  48.  <script>
  49.      function sendPostRequest(targetUrl, parameters, successCallback, errorCallback) {
  50.          $.ajax({
  51.              type: "POST",
  52.              url: targetUrl,
  53.              data: parameters,
  54.              contentType: "application/json; charset=utf-8",
  55.              dataType: "json",
  56.              async: true,
  57.              success: successCallback,
  58.              timeout: 30000,
  59.              error: function (e) {
  60.                  if (e.responseText == "") return;
  61.                  if (e.status == 300) {
  62.                      if (JSON.parse(e.responseText) == "RequireLogon") {
  63.                          return;
  64.                      } else if (JSON.parse(e.responseText) == "Unauthorized") {
  65.                          return;
  66.                      }
  67.                  } else if (e.status == 401 && e.statusText == "Unauthorized") {
  68.                      return;
  69.                  }
  70.                  if (e.statusText == "timeout") {
  71.                      alert("服务器忙");
  72.                      errorCallback && errorCallback(e);
  73.                  } else if (e) {
  74.                      errorCallback && errorCallback(e);
  75.                  }
  76.              }
  77.          });
  78.      }
  79.      /*
  80.     jauery js分页函数
  81.     container：分页容器jquery对象
  82.     pageIndex：当前页码
  83.     pageSize：页大小
  84.     dataCount：总页数
  85.     pageChangedCallback：页面单击回调函数
  86.     */
  87.      function drawPagination(container, pageIndex, pageSize, dataCount, pageChangedCallback) {
  88.          if (dataCount > 0) {
  89.              var pageCount = parseInt((dataCount + pageSize - 1) / pageSize);
  90.              var contents = new Array();
  91.              contents.push('<div class="dataPager clearfix">');
  92.              if (pageIndex > 1) {
  93.                  contents.push('<a id="pager_lbnFirst" value=1>首页</a>');
  94.                  contents.push('<a id="pager_lbnPrev" value=' + (pageIndex - 1) + '>&lt; 上一页</a>');
  95.              }
  96.              contents.join('<span id="pPages">');
  97.              for (var i = pageIndex - 4; i <= pageIndex + 4; i++) {
  98.                  if (i == pageIndex) {
  99.                      contents.push('<a id="pager_lbPage' + i + '" disabled="disabled" class="yemaa" style="margin-left:5px;margin-right:5px;text-decoration:none;">' + i + '</a>');
  100.                  } else if (i > 0 && i <= pageCount) {
  101.                      contents.push('<a id="pager_lbPage' + i + '" value=' + i + ' style="margin-left:5px;margin-right:5px;">' + i + '</a>');
  102.                  }
  103.              }
  104.              contents.join('</span>');
  105.              if (pageIndex < pageCount) {
  106.                  contents.push('<a id="pager_lbnNext" value=' + (pageIndex + 1) + '>下一页 &gt;</a>');
  107.                  contents.push('<a id="pager_lbnLast" value=' + pageCount + '>末页</a>');
  108.              }
  109.              contents.push('共 <span id="pager_lblTotalCount">' + dataCount);
  110.              contents.push('</span> 条 每页 <span id="pager_lblPageSize">' + pageSize);
  111.              contents.push('</span> 条 第 <span id="lblCurrentPage">' + pageIndex + '</span> / <span id="pager_lblTotalPage">' + pageCount + '</span> 页</div>');
  112.              container.html(contents.join(''));
  113.              if (pageChangedCallback) {
  114.                  $("a", container).click(function () {
  115.                      var self = $(this);
  116.                      if (!self.attr("disabled")) {
  117.                          pageChangedCallback(self.attr("value"));
  118.                      }
  119.                  });
  120.              }
  121.              container.show();
  122.          } else {
  123.              container.html('');
  124.              container.hide();
  125.          }
  126.      }
  127.  
  128.      function getQueryOrdersPagination(pageIndex, pageSize) {
  129.          return { "PageSize": pageSize, "PageIndex": pageIndex, "GetRowCount": true };
  130.      }
  131.  
  132.      function bindData(data) {
  133.          $("#content table tbody").html($("#temp").tmpl(data.Data));
  134.          drawPagination($("#pager"), data.Pagination.PageIndex, data.Pagination.PageSize, data.Pagination.RowCount, queryOrders);
  135.      }
  136.  
  137.      function queryOrders(pageIndex, pageSize) {
  138.          if (!pageIndex) pageIndex = 1;
  139.          pageSize = pageSize || 10;
  140.          var pagination = getQueryOrdersPagination(pageIndex, pageSize);
  141.          var parameters = JSON.stringify({ "pagination": pagination });
  142.          sendPostRequest("/ajax/PagingHandler.ashx/Paging", parameters, function (data) {
  143.              bindData(data);
  144.          }, function (e) {
  145.              if (e.statusText == "timeout") {
  146.                  alert("服务器忙");
  147.              } else {
  148.                  alert(e.responseText);
  149.              }
  150.          });
  151.          return false;
  152.      }
  153.  
  154.      window.onload = function () {
  155.          queryOrders(1, 10);
  156.      };
  157.  </script>

下载地址  github :https://github.com/842549829/AjaxPaging

Asp.net Ajax(ashx)的更多相关文章

  1. asp.net 后台多线程异步处理时的 进度条实现一（Ajax+Ashx实现以及封装成控件的实现）

    (更新:有的同学说源代码不想看,说明也不想看,只想要一个demo,这边提供一下:http://url.cn/LPT50k (密码:TPHU)) 工作好长时间了,这期间许多功能也写成了不少的控件来使用, ...

  2. 一种开发模式：ajax + ashx + UserControl

    一.ajax+ashx模式的缺点     在web开发过程中,为了提高网站的用户体验,或多或少都会用到ajax技术,甚至有的网站全部采用ajax来实现,大量使用ajax在增强用户体验的同时会带来一些负 ...

  3. asp.net ajax检查用户名是否存在代码

    原文  asp.net ajax检查用户名是否存在代码 用户注册时,我们经常需要检查用户名是否存在,本文就是实现无刷新验证用户名 打开开发环境VS 2005,新建项目(或打开现有项目),新建一个Web ...

  4. Ajax+Ashx实现以及封装成控件的实现

    asp.net 后台多线程异步处理时的 进度条实现一(Ajax+Ashx实现以及封装成控件的实现) 工作好长时间了,这期间许多功能也写成了不少的控件来使用,但是,都只是为了代码的结构清析一些而已.而这 ...

  5. asp.net ajax控件tab扩展，极品啊，秒杀其它插件

    说明:asp.net ajax控件tab要设置width和height,而且在线文本编辑器放能够放入tab中,也必须是asp.net的控件型在线文本,例如fckeditor,下面是我设置好的配置. & ...

  6. asp.net ajax与jquery的冲突问题解决

    在网上看到有网友说,用了updatepannel这个asp.net ajax异步更新面板后,javascript或者jquery代码不起作用,实际上,可以在updatepannel的触发器中进行设置解 ...

  7. asp.net Ajax和web services

    新建一个web服务 using System; using System.Collections.Generic; using System.Linq; using System.Web; using ...

  8. ASP.NET AJAX Control Toolkit

    https://ajaxcontroltoolkit.codeplex.com/ 警告 7 未能找到引用的组件“Antlr3.Runtime”. 警告 6 未能找到引用的组件“HtmlAgilityP ...

  9. 【转】【Asp.Net】了解使用 ASP.NET AJAX 进行局部页面更新

    简介Microsoft的 ASP.NET 技术提供了一个面向对象.事件驱动的编程模型,并将其与已编译代码的优势结合起来.但其服务器端的处理模型仍存在技术本身所固有的几点不足: 进行页面更新需要往返服务 ...

随机推荐

  1. unittest之suite测试集（测试套件）

    suite 这个表示测试集,不要放在class内,否则会提示"没有这样的测试方法在类里面 ",我觉得它唯一的好处就是调试的时候可以单独调试某个class而已,我一般不用它,调试时可 ...

  2. java和python中的string和int数据类型的转换

    未经允许,禁止转载!!! 在平时写代码的时候经常会用到string和int数据类型的转换 由于java和python在string和int数据类型转换的时候是不一样的 下面总结了java和python ...

  3. iOS学习之VFL语言简介

    什么是VFL语言 VFL(Visual Format Language),“可视化格式语言”. VFL是苹果公司为了简化autolayout的编码而推出的抽象语言. 语法说明 H:[cancelBut ...

  4. 来自阿里妈妈的iconfont(转）

    转自http://www.augsky.com/775.html 随便说说两者的优缺点 其实主要是说iconfont的优点和Font Awesome的缺点.-_-|||iconfont的图标库相当巨大 ...

  5. How To Join XLA_AE_HEADERS and RCV_TRANSACTIONS(子分类账到事务处理追溯)

    Applies to:   Oracle Inventory Management - Version: 12.0.6<max_ver> and later   [Release: 12 ...

  6. Linux命令: 替换字符串

    敲命令按以下顺序 ①vim filename ②e ③i ④ESC 1    :s/str1/str2    把当前行的第一个str1替换成str2 2    :s/str1/str2/g    把当 ...

  7. Python: 合并多个字典

    现在有多个字典或者映射,想将它们从逻辑上合并为一个单一的映射后执行某些操作,比如查找值或者检查某些键是否存在. eg1: a = {'x': 1, 'z': 3 }b = {'y': 2, 'z': ...

  8. IntelliJ IDEA 编译Java程序出现 'Error:java: 无效的源发行版: 9' 解决方法

    最新安装的IntelliJ IDEA 2018.1编译器,创建Java Project,并选择之前安装好的Eclipse配置的JDK,如图所示: 在工程中添加 Main.class, main函数中写 ...

  9. Ubuntu系统下在github中新增库的方法

    上一篇介绍了Ubuntu16.04系统下安装git的方法.本博客介绍怎么在github上怎么新建库. 如图 root@ranxf:/home/ranxf/learnGit/ranran_jiekou# ...

  10. 如何在Linux环境下通过uwgsi部署Python服务

    部署python程序时常常会遇到同一台服务器上2.x和3.x共存的情况,不同应用需要使用不用的python版本,使用virtualenv创建虚拟环境能很好地解决这一问题. 首先,需要在服务器上安装vi ...