《自己动手写jquery分页插件》由会员分享，可在线阅读，更多相关《自己动手写jquery分页插件（8页珍藏版）》请在金锄头文库上搜索。
1、如果说您没用过这些东东的话，我相信看完这篇博文会对您有帮助的，如果有任何问题不懂或者有 bug 没问题，欢迎随时联系我， 同时也欢迎高手多给点意见，我不建议在喷子中成长。 本人 QQ:364175837 前言 相信很多朋友都用过，Jquery 的分页插件，我之前就用的 jquery.paper 这个,如果有兴趣可以留下 QQ，我发份简单的实例源码给您。 该代码是晚上匆忙中完成的，所以没怎么优化，但是主要作为实例来结合这些知识的一个综合运用。好了废话不多说，直接上代码。 vs2010+sql2005express 正文 首先我们创建一般处理程序，来读取数据库中内容，得到返回值. 创建文件，Get
2、Data.ashx. 我这里是用的存储过程，存储过程会再下面粘出来，至于数据只是实例，你们可根据需求自行读取数据 代码如下： 复制代码代码如下:using System; using System.Web; using System.Data.SqlClient; using System.Data; using System.Collections.Generic; using System.Web.Script.Serialization; public class GetData : IHttpHandler public void ProcessRequest (HttpContext
3、 context) context.Response.ContentType = text/plain; var pageIndex = context.RequestPageIndex; string connectionString = Data Source=KUSESQLEXPRESS;Initial Catalog=bookshop;Integrated Security=True; /判断当前索引存不存在，如果不存在则获取记录的总数。 if (string.IsNullOrEmpty(pageIndex) /获取查询记录总数的 sql 语句 string sql = select
4、count(-1) from books; int count = 0; int.TryParse(SqlHelper.ExecuteScalar(connectionString, System.Data.CommandType.Text, sql, null).ToString(), out count); context.Response.Write(count); context.Response.End(); /当根据索引获取数据 else int currentPageIndex = 1; int.TryParse(pageIndex, out currentPageIndex);
5、 SqlParameter parms = new SqlParameter new SqlParameter(FEILDS,SqlDbType.NVarChar,1000), new SqlParameter(PAGE_INDEX,SqlDbType.Int,10), new SqlParameter(PAGE_SIZE,SqlDbType.Int,10), new SqlParameter(ORDERTYPE,SqlDbType.Int,2), new SqlParameter(ANDWHERE,SqlDbType.VarChar,1000), new SqlParameter(ORDER
6、FEILD,SqlDbType.VarChar,100) ; parms0.Value = *;/获取所有的字段 parms1.Value = pageIndex;/当前页面索引 parms2.Value = 10;/页面大小 parms3.Value = 0;/升序排列 parms4.Value = ;/条件语句 parms5.Value = ID;/排序字段 List list = new List(); using (SqlDataReader sdr = SqlHelper.ExecuteReader(connectionString, CommandType.StoredProced
7、ure, PAGINATION, parms) while (sdr.Read() list.Add(new Book Title = sdr2.ToString(), Auhor = sdr2.ToString(), PublishDate = sdr4.ToString(), ISBN = sdr5.ToString() ); context.Response.Write(new JavaScriptSerializer().Serialize(list).ToString();/转为 Json 格式 public bool IsReusable get return false; pub
8、lic class Book public string Title get; set; public string Auhor get; set; public string PublishDate get; set; public string ISBN get; set; 显示数据页面-异步请求获取数据，基于 jquery 创建页面 Show.htm 复制代码代码如下:/*显示数据内容*/ /*显示分页条*/ js 代码 复制代码代码如下:$(function () $.post(GetData.ashx, null, function (data) var total = data;
9、PageClick(1, total, 3); ); PageClick = function (pageIndex, total, spanInterval) $.ajax( url: GetData.ashx, data: PageIndex: pageIndex , type: post, dataType: json, success: function (data) /索引从 1 开始 /将当前页索引转为 int 类型 var intPageIndex = parseInt(pageIndex); /获取显示数据的表格 var table = $(#content); /清楚表格中内
10、容 $(#content tr).remove(); /向表格中添加内容 for (var i = 0; i + datai.Title + + datai.Auhor + + datai.PublishDate + + datai.ISBN + ) ); /for /创建分页 /将总记录数结果 得到 总页码数 var pageS = total if (pageS % 10 = 0) pageS = pageS / 10; else pageS = parseInt(total / 10) + 1; var $pager = $(#pager); /清楚分页 div 中的内容 $(#page
11、r span).remove(); $(#pager a).remove(); /添加第一页 if (intPageIndex = 1) $pager.append(第一页 ); else var first = $(第一页).click(function () PageClick($(this).attr(first), total, spanInterval); return false; ); $pager.append(first); /添加上一页 if (intPageIndex = 1) $pager.append(上一页 ); else var pre = $(上一页).clic
12、k(function () PageClick($(this).attr(pre), total, spanInterval); return false; ); $pager.append(pre); /设置分页的格式 这里可以根据需求完成自己想要的结果 var interval = parseInt(spanInterval); /设置间隔 var start = Math.max(1, intPageIndex - interval); /设置起始页 var end = Math.min(intPageIndex + interval, pageS)/设置末页 if (intPageIn
13、dex pageS ? pageS : (2 * interval + 1); if (intPageIndex + interval) pageS) start = (pageS - 2 * interval) + j + ); $pager.append(spanSelectd); /if else var a = $( + j + ).click(function () PageClick($(this).text(), total, spanInterval); return false; ); $pager.append(a); /else /for /上一页 if (intPage
14、Index = total) $pager.append(下一页 ); else var next = $(下一页).click(function () PageClick($(this).attr(next), total, spanInterval); return false; ); $pager.append(next); /最后一页 if (intPageIndex = pageS) $pager.append(最后一页 ); else var last = $(最后一页).click(function () PageClick($(this).attr(last), total,
15、spanInterval); return false; ); $pager.append(last); /sucess ); /ajax ; /function ); /ready 分页样式-如果有感兴趣的，我这里还有 20 几套分页样式，可以留下 QQ 复制代码代码如下:DIV.yahoo2 PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FONT-SIZE: 0.85em; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; FONT-FAMILY: Tahoma,Helvetica,sans-serif; TEXT-ALIGN: center DIV.yahoo2 A BORDER-RIGHT: #ccdbe4 1px solid; PADDING-RIGHT: 8px; BACKGROUND-POSITION: 50% bottom; BORDER-TOP: #ccdbe4 1px
