ASP.NET+JQuery实现AJAX的分页

最新推荐文章于 2020-07-13 15:10:47 发布

279503482

最新推荐文章于 2020-07-13 15:10:47 发布

阅读量1.8k

点赞数

分类专栏： ASP.NET 文章标签： jquery asp.net ajax function button class

本文链接：https://blog.csdn.net/279503482/article/details/5631251

版权

ASP.NET 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

AJAX的分页，实现思路是：

　　1.利用$.fn.extend在JQuery框架下扩展pager类

　　2.将获取记录总数与相应页记录的后台方法，写在继承自IHttpHandler类的Handler.ashx.cs类，当然实际上用aspx.cs文件写后台方法也没问题，但由于.ashx.cs文件无需处理页面诸多事件因而效率更高。

　　3.在呈现页面上加载pager类

　　以下是实现的代码：

1.扩展pager类:extend.js
(function($){ $.fn.extend({ pager: function(totalCount,options) { var opts = jQuery.extend({ pageSize:10, callback:function(){} }, options); return this.each(function(){ var panel = $(this); function pageCount(){ return Math.ceil(totalCount/opts.pageSize); } function selectPage(type){ return function(){ var page = parseInt($('#currentPage').val()); if(type=='first') $('#currentPage').val('1'); if(type=='last') $('#currentPage').val($('#totalCount').val()); if(type=='previous') { if ((page-1)==0) $('#currentPage').val('1'); else $('#currentPage').val(page-1); } if(type=='next') { if ((page+1)>parseInt($('#totalCount').val())) $('#currentPage').val($('#totalCount').val()); else $('#currentPage').val(page+1); } //go按钮 if(type=='go'){ if(isNaN($('input.page-index').val())||$('input.page-index').val()=='') return false; var textIndex = parseInt($('input.page-index').val()); $('#currentPage').val(textIndex); if(textIndex < 1) $('#currentPage').val('1'); else if(textIndex > parseInt($('#totalCount').val())) $('#currentPage').val($('#totalCount').val()); } $("input.page-next").attr("disabled",""); $("input.page-last").attr("disabled",""); $("input.page-first").attr("disabled",""); $("input.page-previous").attr("disabled",""); if (parseInt($('#currentPage').val()) == 1){ $("input.page-first").attr("disabled","disabled"); $("input.page-previous").attr("disabled","disabled") } if (parseInt($('#currentPage').val()) == parseInt($('#totalCount').val())){ $("input.page-next").attr("disabled","disabled"); $("input.page-last").attr("disabled","disabled"); } opts.callback(parseInt($('#currentPage').val())); $('span.page-info').html($('#currentPage').val() + '/' + $('#totalCount').val()); } } function render(){ var html = '<table><tbody><tr>' +'<td><span class="page-info">1' + '/'+ pageCount() + '</span></td>' +'<td><input class="page-first" type="button" value=" << " /></td>' +'<td><input class="page-previous" type="button" value=" < " /></td>' +'<td><input class="page-next" type="button" value=" > " /></td>' +'<td><input class="page-last" type="button" value=" >> " /></td>' +'<td><input class="page-index" type="text" style="width:20px;"/><input class="page-go" type="button" value="go" /></td>' +'<td><span class="page-totalCount">共'+totalCount+'条记录</span></td>' +'<td><input id="currentPage" type="button" style="visibility:hidden;" mce_style="visibility:hidden;" /></td>' +'<td><input id="totalCount" type="button" style="visibility:hidden;" mce_style="visibility:hidden;"/></td>' +'</tr></tbody></table>'; panel.empty(); panel.append(html); $('#currentPage').val('1'); $('#totalCount').val(pageCount()); $('input.page-first',panel).bind('click',selectPage('first')); $('input.page-previous',panel).bind('click',selectPage('previous')); $('input.page-next',panel).bind('click',selectPage('next')); $('input.page-last',panel).bind('click',selectPage('last')); $('input.page-go',panel).bind('click',selectPage('go')); } render(); $('input.page-first').click(); }); } });})(jQuery);

2.后台HandlerTest.ashx.cs

using System; using System.Collections; using System.Data; using System.Linq; using System.Web; using System.Web.Services; using System.Web.Services.Protocols; using System.Xml.Linq; using System.Text; using App.Business; namespace App.Handler{ /// <summary> /// Summary description for $codebehindclassname$ /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class HandlerTest : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string result = string.Empty; if (context.Request.Params["getPageCount"] != null) result = GetRecordsCount(); if (context.Request.Params["pageIndex"] != null) { string pageindex = context.Request.Params["pageIndex"]; result = GetPageData(context.Request.Params["pageIndex"]); } context.Response.Write(result); } private string GetPageData(string p) { int pageIndex = int.Parse(p); return DataTable2Json(StockStatBusiness.Instance.SelectByWhere(10, pageIndex, "sumdealmoney>10000").Tables[0]); } private string GetRecordsCount() { return StockStatBusiness.Instance.GetRecordCount("sumdealmoney>10000").ToString(); } public static string DataTable2Json(DataTable dt) { StringBuilder jsonBuilder = new StringBuilder(); jsonBuilder.Append("{/""); jsonBuilder.Append(dt.TableName.ToLower() == string.Empty ? "table" : dt.TableName.ToLower()); jsonBuilder.Append("/":["); for (int i = 0; i < dt.Rows.Count; i++) { jsonBuilder.Append("{"); for (int j = 0; j < dt.Columns.Count; j++) { jsonBuilder.Append("/""); jsonBuilder.Append(dt.Columns[j].ColumnName); jsonBuilder.Append("/":/""); jsonBuilder.Append(dt.Rows[i][j].ToString()); jsonBuilder.Append("/","); } jsonBuilder.Remove(jsonBuilder.Length - 1, 1); jsonBuilder.Append("},"); } jsonBuilder.Remove(jsonBuilder.Length - 1, 1); jsonBuilder.Append("]"); jsonBuilder.Append("}"); return jsonBuilder.ToString(); } public bool IsReusable { get { return false; } } }}

3.页面呈现Pager.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Pager.aspx.cs" Inherits="App.Pager" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>AjaxPager</title> <mce:script src="../Scripts/jquery-1.2.3-intellisense.js" mce_src="Scripts/jquery-1.2.3-intellisense.js" type="text/javascript"></mce:script> <mce:script src="../Scripts/extend.js" mce_src="Scripts/extend.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"></mce:script> </head><body> <form id="form1" runat="server"> <div id="mypage" ></div> <div> <ul id="datas"> <li id="template"> <span id="StockCode"> StockCode </span>/ <span id="SumDealNum"> SumDealNum </span>/ <span id="SumDealMoney"> SumDealMoney </span>/ <span id="SumBargainExpense"> SumBargainExpense </span>/ <span id="Profit"> Profit </span>/ <span id="LeftDealNum"> LeftDealNum </span> </li> </ul> </div> <div id="load" style="right: 0px; position: absolute; top: 0px; background-color: red; display:none;"> LOADING. </div> </form></body></html>