jQuery getJSON() + .ashx + jquery.pager 实现分页

在以前文章jQuery getJSON() + .ashx 实现分页 实现的分页比较简单，刚好看到网上的jquery.pager 插件，就把原来代码修改了一翻。

jquery.pager下载：http://plugins.jquery.com/project/Pager

一、.html页

< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title ></ title >
< link href ="Pager.css" rel ="stylesheet" type ="text/css" />
< script type ="text/javascript" src ="jquery-1.4.2.min.js" ></ script >
< script src ="jquery.pager.js" type ="text/javascript" ></ script >
< script type ="text/javascript" >
var pagecount;
$(document).ready( function () {
$.get( " Handler.ashx " , { type: 1 ,pagesize: 20 ,index: 1 }, function (data, textStatus) {
pagecount = data;
$( " #pager " ).pager({ pagenumber: 1 , pagecount: pagecount, buttonClickCallback: PageClick });
});
Go( 1 );
});
PageClick = function (pageclickednumber) {
$( " #pager " ).pager({ pagenumber: pageclickednumber, pagecount: pagecount, buttonClickCallback: PageClick });
Go(pageclickednumber);
}
function Go(index) {
$( " #Content " ).html( "" );
$.getJSON( " Handler.ashx " , { type: 0 , pagesize: 10 , index:index }, function (data) {
$( " #Content " ).append( " <tr><th style＝'width:130px'>id</th><th style＝'width:150px'>title</th></tr> " );
$.each(data, function (i) {
$( " #Content " ).append( " <tr><td> " + data[i].id + " </td><td> " + data[i].title + " </td></tr> " );
})
});
}
</ script >
</ head >
< body >
< form id ="form1" runat ="server" >
< div style ="width: 100%" >
< table id ="Content" >
</ table >
< div id ="pager" ></ div >
</ div >
</ form >
</ body >
</ html >

二、.ashx页

<% @ WebHandler Language = " C# " Class = " Handler " %>

using System;
using System.Web;
using System.Text;

public class Handler : IHttpHandler {

public void ProcessRequest (HttpContext context)
{
context.Response.ContentType = " text/plain " ;

DataBase db = new DataBase();
int pageSize = int .Parse(context.Request.Params[ " pagesize " ]); // 每页记录数
int pageIndex = int .Parse(context.Request.Params[ " index " ]); // 当前页索引
int type = int .Parse(context.Request.Params[ " type " ]); // 1为获取总页数，0为获取分页数据

if (type == 1 )
{
int recordCount = db.GetRecordCount( " select count(*) from test " );
int pageCount = Convert.ToInt32(Math.Ceiling(Convert.ToDouble(recordCount) / pageSize));
context.Response.Write(pageCount.ToString());
}
else
{
string sql = string .Format( " select id,title from ( select row_number() over (order by id) as rowNum,* from test) as t "
+ " where rowNum>{0} and rowNum<={1} " , (pageIndex - 1 ) * pageSize, pageIndex * pageSize);
System.Data.DataTable dt = db.GetDataTable(sql);

context.Response.Write(JSONHelper.DataTableToJSON(dt));
}
}
public bool IsReusable {
get {
return false ;
}
}
}

三、效果

---------------------------------------------------------------------------------------

备注说明：

1、其中JSONHelper.DataTableToJSON(dt)方法为DataTable解析成JSON，见另一篇文章JSONHelper 帮助类

2、我把jquery.pager.js里面的按钮改为了中文；

3、当当前页为第1页时，页面还显示“首页”、“上一页”，当当前页为最后一页时，页面还显示“下一页”、“末页”，不太符合常理。

可以修改jquery.pager.js文件使当前页为第1页时隐藏“首页”、“上一页”，当前页为最后一页时，隐藏“下一页”、“末页”，改的2个地方如下加粗代码所示：

  if (pagenumber > 1)
            $pager.append(renderButton('首页', pagenumber, pagecount, buttonClickCallback)).append(renderButton('上一页', pagenumber, pagecount, buttonClickCallback));

  if (pagenumber < pagecount)
            $pager.append(renderButton('下一页', pagenumber, pagecount, buttonClickCallback)).append(renderButton('末页', pagenumber, pagecount, buttonClickCallback));