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));