您的位置：首页 > Web前端 > JQuery

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

2010-08-18 17:47 483 查看

在以前文章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));

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航