jquery 分页
说明：样式 和js代码在 博客园的文件里 名称是jquery 分页
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="testpage2.aspx.cs" Inherits="DtCms.Web.Aspx.testpage2" %>
<!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>无标题页</title>
<script type="text/javascript" src="../Js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="../js/jquery.pagination.js"></script>
<link rel="Stylesheet" type="text/css" href="../Css/pagination.css" />
<style type="text/css">
.content{ position:relative; }
.content a{ display:block; width:40px; height:20px; border:1px solid red; }
.show{ width:300px; height:50px; border:1px solid #999999;}
.show a{ display:block;}
.show a:hover{ color:red; }
</style>
<script type="text/javascript">
$(function(){
$(".show").hide();
$(".content a").mousemove(function(){
$(".show").show();
var left=$(this).offset().left;
var top= $(this).offset().top;
var url=$(this).attr("href");
$.get(url,function(data){
$(".show").html("");
$(".show").html(data);
$(".show").css({"position":"absolute","left":left+20,"top":top+20});
})
}).mouseout(function(){ $(".show").hide(); })
$(".show").hover(function(){$(this).show();},function(){$(this).hide();}
)
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="content">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<a href="testpage2_1.aspx?id=<%#Eval("Id") %>" tt="<%#Eval("Id") %>"><%#Eval("Id") %></a>
<p><%#Eval("Title") %></p>
</ItemTemplate>
</asp:Repeater>
</div>
<div class="show"></div>
<div id="pagination" class="flickr" style="text-align:left;"> </div>
<script type="text/javascript">
$(function(){
$("#pagination").pagination(21,{
callback:pageselectCallback,
prev_text:"« 上一页",
next_text:"下一页 »",
items_per_page:4,
num_display_entries:5,
current_page:<%=curpage %>,
num_edge_entries:2,
link_to:"testpage2.aspx?page=__id__"
});
});
function pageselectCallback(page_id, jq){
//alert(page_id); 回调函数，进一步使用请参阅说明文档
}
</script>
</form>
</body>
</html>
.CS 源代码
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Data.OleDb;
using System.Text;
using DtCms.Common;
namespace DtCms.Web.Aspx
{
public partial class testpage2 : System.Web.UI.Page
{
public static string constr = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString + System.Web.HttpContext.Current.Server.MapPath("~/App_Data/DtCmsdb.mdb");
public OleDbConnection con = new OleDbConnection(constr);
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
bind();
}
}
public int pagesize = 3;
public int curpage;
public int pagecount;
public string str;
public int l;
public void bind()
{
if (Request["page"] == null || int.Parse(Request["page"])==0)
{
str = "select top " + pagesize + " * from dt_Article ";
}
else
{
l = int.Parse(Request["page"].ToString());
l = l + 1;
str = "select top " + pagesize + " * from dt_Article where Id not in(select top " + (l - 1) * pagesize + " Id from dt_Article )";
}
if (Request["page"] != null)
{
curpage =int.Parse( Request["page"]);
}
Response.Write(str);
DataSet ds = new DataSet();
OleDbDataAdapter sqld = new OleDbDataAdapter(str, con);
con.Open();
sqld.Fill(ds);
con.Close();
Repeater1.DataSource = ds.Tables[0].DefaultView;
Repeater1.DataBind();
// pagecount = int.Parse(Math.Ceiling((double)ds.Tables[0].Rows.Count / (double)pagesize).ToString());
//PagedDataSource pds = new PagedDataSource();
//pds.DataSource = ds.Tables[0].DefaultView;
//pds.AllowPaging = true;
//pds.PageSize = 4;
//TextBox1.Text = pds.PageCount.ToString();
//int curpage = (int.Parse(Label1.Text));
//pds.CurrentPageIndex = curpage;
//// pds.PageCount = Math.Ceiling((double)ds.Tables[0].Rows.Count / (double)pds.PageSize);
//Repeater1.DataSource = pds;
//Repeater1.DataBind();
}
}
}
