主要实现 ajax分页功能
效果图
后台方法代码展示
/// <summary> /// WebAjax处理类 /// </summary> public class WebAjaxHandler : IHttpHandler, IRequiresSessionState { /// <summary> /// 实例可再次使用,则为 true;否则为 false。 /// </summary> public bool IsReusable { get { return true; } } /// <summary> /// 当前Session /// </summary> protected HttpSessionState Session { get { return HttpContext.Current.Session; } } /// <summary> /// 当前Application /// </summary> protected HttpApplicationState Application { get { return HttpContext.Current.Application; } } /// <summary> /// 通过实现 System.Web.IHttpHandler 接口的自定义 HttpHandler 启用 HTTP Web 请求的处理。 /// </summary> /// <param name="context">它提供对用于为 HTTP 请求提供服务的内部服务器对象(如 Request、Response、Session和 Server)的引用。</param> public void ProcessRequest(HttpContext context)
....................具体代码请下载demo
/// <summary> /// PagingHandler 的摘要说明 /// </summary> public class PagingHandler : WebAjaxHandler { public object Paging(Pagination pagination) { //分页为测试数据 数据库分页自行实现 var list = new List<Model>(); for (int i = 0; i < 100; i++) { list.Add(new Model { Id = i, Name = "name" + i, Age = i, Address = "address" + i, Mobile = "1355115457", Height = i, Weight = i, Remark ="格斯达克沙地上多空双方的伤口附近的客服电话开机"}); } var startRow = (pagination.PageIndex - 1) * pagination.PageSize; var endRow = pagination.PageIndex * pagination.PageSize; pagination.RowCount = list.Count; return new { Data = list.Take(endRow).Skip(startRow), Pagination = pagination }; } }
纯VUE
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>.net ajax 分页</title> <link href="../css/style.css" rel="stylesheet" /> <script src="../js/jquery-1.7.2.min.js"></script> <script src="../js/vue.min.js"></script> </head> <body> <div id="app"> <div class="table column"> <table> <thead> <tr> <th>Id</th> <th>名字</th> <th>年龄</th> <th>地址</th> <th>手机</th> <th>身高</th> <th>体重</th> <th>备注</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="item in sites"> <td>{{item.Id}}</td> <td>{{item.Name}}</td> <td>{{item.Age}}</td> <td>{{item.Address}}</td> <td>{{item.Mobile}}</td> <td>{{item.Height}}</td> <td>{{item.Weight}}</td> <td>{{item.Remark}}</td> <td> <a href='javascript:operation(${Id});'>操作</a> </td> </tr> </tbody> </table> </div> <div v-show="dataCount > 0"> <div class="dataPager"> <template v-show="pageIndex > 1"> <a v-on:click="goPage(1)">首页</a> <a v-on:click="goPage(pageIndex - 1)">上一页</a> </template> <span> <template v-for="item in pageSizeArray"> <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> <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> </template> </span> <span v-show="pageIndex < pageCount"> <a v-on:click="goPage(pageIndex + 1)">下一页</a> <a v-on:click="goPage(pageCount)">末页</a> </span> </div> </div> </div> </body> </html> <script> var vm = new Vue({ el: '#app', data: { pageSize: 10, //页码 pageIndex: 1, //当前页 dataCount: 0,//总条数 sites: [], //数据 pageCount: 0 //总页数 }, computed: { // 分页数据 pageSizeArray: function () { var array = new Array(); var index = this.pageIndex; var size = this.pageSize; for (var i = index - 4; i <= index + 4; i++) { if (i === index) { array.push({ isFirst: true, value: i }); } else if (i > 0 && i <= size) { array.push({ isFirst: false, value: i }); } } return array; } }, // 数据初次加载 mounted: function () { this.queryPaging(1, this.pageSize); }, methods: { // 分页事件 goPage: function (pageIndex) { this.queryPaging(pageIndex, this.pageSize); }, // 分页查询调侃 getQueryPagination: function (pageIndex, pageSize) { return { "PageSize": pageSize, "PageIndex": pageIndex, "GetRowCount": true }; }, // 分页数据绑定 bindData: function (self, data) { var d = data.Data; self.pageSize = data.Pagination.PageSize; self.pageIndex = data.Pagination.PageIndex; self.dataCount = data.Pagination.RowCount; self.pageCount = parseInt((self.dataCount + self.pageSize - 1) / self.pageSize); for (var i = 0; i < d.length; i++) { self.$set(vm.sites, i, d[i]); } }, // 分页ajax queryPaging: function (pageIndex, pageSize) { var self = this; if (!pageIndex) { pageIndex = 1; } pageSize = pageSize || 10; var pagination = this.getQueryPagination(pageIndex, pageSize); var parameters = JSON.stringify({ "pagination": pagination }); $.ajax({ type: "POST", url: "/ajax/PagingHandler.ashx/Paging", data: parameters, contentType: "application/json; charset=utf-8", dataType: "json", async: true, success: function (d) { self.bindData(self, d); }, timeout: 30000, error: function (e) { if (e.responseText === "") return; if (e.status === 300) { if (JSON.parse(e.responseText) === "RequireLogon") { return; } else if (JSON.parse(e.responseText) === "Unauthorized") { return; } } else if (e.status === 401 && e.statusText === "Unauthorized") { return; } if (e.statusText === "timeout") { alert("服务器忙"); } else if (e) { alert(e.responseText); } } }); } } }); </script>
vue 替换jquerytemplate
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>.net ajax 分页</title> <link href="../css/style.css" rel="stylesheet" /> <script src="../js/jquery-1.7.2.min.js"></script> <script src="../js/vue.min.js"></script> <script src="../ajax/PagingHandler.ashx"></script> </head> <body> <div id="content" class="table column"> <table> <thead> <tr> <th>Id</th> <th>名字</th> <th>年龄</th> <th>地址</th> <th>手机</th> <th>身高</th> <th>体重</th> <th>备注</th> <th>操作</th> </tr> </thead> <tbody id="app"> <template v-for="item in sites"> <tr> <td>{{item.Id}}</td> <td>{{item.Name}}</td> <td>{{item.Age}}</td> <td>{{item.Address}}</td> <td>{{item.Mobile}}</td> <td>{{item.Height}}</td> <td>{{item.Weight}}</td> <td>{{item.Remark}}</td> <td> <a href='javascript:operation(${Id});'>操作</a> </td> </tr> </template> </tbody> </table> </div> <div id="pager"></div> </body> </html> <script> /* jauery js分页函数 container:分页容器jquery对象 pageIndex:当前页码 pageSize:页大小 dataCount:总页数 pageChangedCallback:页面单击回调函数 */ function drawPagination(container, pageIndex, pageSize, dataCount, pageChangedCallback) { if (dataCount > 0) { var pageCount = parseInt((dataCount + pageSize - 1) / pageSize); var contents = new Array(); contents.push('<div class="dataPager clearfix">'); if (pageIndex > 1) { contents.push('<a id="pager_lbnFirst" value=1>首页</a>'); contents.push('<a id="pager_lbnPrev" value=' + (pageIndex - 1) + '>< 上一页</a>'); } contents.join('<span id="pPages">'); for (var i = pageIndex - 4; i <= pageIndex + 4; i++) { if (i === pageIndex) { contents.push('<a id="pager_lbPage' + i + '" disabled="disabled" class="yemaa" style="margin-left:5px;margin-right:5px;text-decoration:none;">' + i + '</a>'); } else if (i > 0 && i <= pageCount) { contents.push('<a id="pager_lbPage' + i + '" value=' + i + ' style="margin-left:5px;margin-right:5px;">' + i + '</a>'); } } contents.join('</span>'); if (pageIndex < pageCount) { contents.push('<a id="pager_lbnNext" value=' + (pageIndex + 1) + '>下一页 ></a>'); contents.push('<a id="pager_lbnLast" value=' + pageCount + '>末页</a>'); } contents.push('共 <span id="pager_lblTotalCount">' + dataCount); contents.push('</span> 条 每页 <span id="pager_lblPageSize">' + pageSize); contents.push('</span> 条 第 <span id="lblCurrentPage">' + pageIndex + '</span> / <span id="pager_lblTotalPage">' + pageCount + '</span> 页</div>'); container.html(contents.join('')); if (pageChangedCallback) { $("a", container).click(function () { var self = $(this); if (!self.attr("disabled")) { pageChangedCallback(parseInt(self.attr("value"))); } }); } container.show(); } else { container.html(''); container.hide(); } } function getQueryOrdersPagination(pageIndex, pageSize) { return { "PageSize": pageSize, "PageIndex": pageIndex, "GetRowCount": true }; } var vm = null; function bindData(data) { var d = data.Data; if (vm === null) { vm = new Vue({ el: '#app', data: { sites: d } }); } else { for (var i = 0; i < d.length; i++) { vm.$set(vm.sites, i, d[i]); // Vue.set(vm.sites, i, d[i]); } } drawPagination($("#pager"), data.Pagination.PageIndex, data.Pagination.PageSize, data.Pagination.RowCount, queryOrders); } function queryOrders(pageIndex, pageSize) { if (!pageIndex) pageIndex = 1; pageSize = pageSize || 10; var pagination = getQueryOrdersPagination(pageIndex, pageSize); $.net.PagingHandler.Paging(pagination, function (data) { bindData(data); }, function (e) { if (e.statusText === "timeout") { alert("服务器忙"); } else { alert(e.responseText); } }); return false; } window.onload = function () { queryOrders(1, 10); }; </script>
.net嵌入脚本实现如下:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>.net ajax 分页</title> <link href="../css/style.css" rel="stylesheet" /> <script src="../js/jquery-1.7.2.min.js"></script> <script src="../js/jquerytemplate.js"></script> <script src="../ajax/PagingHandler.ashx"></script> <!--jquery template--> <script type="text/x-jquery-tmpl" id="temp"> <tr> <td>${Id}</td> <td>${Name}</td> <td>${Age}</td> <td>${Address}</td> <td>${Mobile}</td> <td>${Height}</td> <td>${Weight}</td> <td>${Remark}</td> <td> <a href='javascript:operation(${Id});'>操作</a> </td> </tr> </script> </head> <body> <div id="content" class="table column"> <table> <thead> <tr> <th>Id</th> <th>名字</th> <th>年龄</th> <th>地址</th> <th>手机</th> <th>身高</th> <th>体重</th> <th>备注</th> <th>操作</th> </tr> </thead> <tbody></tbody> </table> </div> <div id="pager"></div> </body> </html> <script> /* jauery js分页函数 container:分页容器jquery对象 pageIndex:当前页码 pageSize:页大小 dataCount:总页数 pageChangedCallback:页面单击回调函数 */ function drawPagination(container, pageIndex, pageSize, dataCount, pageChangedCallback) { if (dataCount > 0) { var pageCount = parseInt((dataCount + pageSize - 1) / pageSize); var contents = new Array(); contents.push('<div class="dataPager clearfix">'); if (pageIndex > 1) { contents.push('<a id="pager_lbnFirst" value=1>首页</a>'); contents.push('<a id="pager_lbnPrev" value=' + (pageIndex - 1) + '>< 上一页</a>'); } contents.join('<span id="pPages">'); for (var i = pageIndex - 4; i <= pageIndex + 4; i++) { if (i === pageIndex) { contents.push('<a id="pager_lbPage' + i + '" disabled="disabled" class="yemaa" style="margin-left:5px;margin-right:5px;text-decoration:none;">' + i + '</a>'); } else if (i > 0 && i <= pageCount) { contents.push('<a id="pager_lbPage' + i + '" value=' + i + ' style="margin-left:5px;margin-right:5px;">' + i + '</a>'); } } contents.join('</span>'); if (pageIndex < pageCount) { contents.push('<a id="pager_lbnNext" value=' + (pageIndex + 1) + '>下一页 ></a>'); contents.push('<a id="pager_lbnLast" value=' + pageCount + '>末页</a>'); } contents.push('共 <span id="pager_lblTotalCount">' + dataCount); contents.push('</span> 条 每页 <span id="pager_lblPageSize">' + pageSize); contents.push('</span> 条 第 <span id="lblCurrentPage">' + pageIndex + '</span> / <span id="pager_lblTotalPage">' + pageCount + '</span> 页</div>'); container.html(contents.join('')); if (pageChangedCallback) { $("a", container).click(function () { var self = $(this); if (!self.attr("disabled")) { pageChangedCallback(parseInt(self.attr("value"))); } }); } container.show(); } else { container.html(''); container.hide(); } } function getQueryOrdersPagination(pageIndex, pageSize) { return { "PageSize": pageSize, "PageIndex": pageIndex, "GetRowCount": true }; } function bindData(data) { $("#content table tbody").html($("#temp").tmpl(data.Data)); drawPagination($("#pager"), data.Pagination.PageIndex, data.Pagination.PageSize, data.Pagination.RowCount, queryOrders); } function queryOrders(pageIndex, pageSize) { if (!pageIndex) pageIndex = 1; pageSize = pageSize || 10; var pagination = getQueryOrdersPagination(pageIndex, pageSize); $.net.PagingHandler.Paging(pagination, function (data) { bindData(data); }, function (e) { if (e.statusText === "timeout") { alert("服务器忙"); } else { alert(e.responseText); } }); return false; } window.onload = function () { queryOrders(1, 10); }; </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) + ')">< 上一页</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) + ')">下一页 ></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) + '>< 上一页</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) + '>下一页 ></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>