asp.net JQuery 分页无刷新，自定义每页显示条数
|
|
aspx页面代码：
其中的host层用来显示加载过来的控件，我用的是Repeater
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" EnableEventValidation="false" Inherits="Default6" %>
注意在头部加上EnableEventValidation="false"；
后台的cs文件中加上这个方法：方法体什么都不用写//试了试vs2010里边不加 也没事，所以说加不加这个自己看情况吧
public override void VerifyRenderingInServerForm(Control control)
{
}
页面代码：
<div id="init">
<div id="host">
</div>
<div id="toolBar">
<select id="EveryPageNum">
<option>5</option>
<option>10</option>
<option>15</option>
<option>20</option>
</select>
<img alt="" src="Images/images/separator.gif" />
<img alt="首页" src="Images/images/first.gif" id="lbtnFirst"/>
<img alt="上一页" src="Images/images/prev.gif" id="lbtnPrev"/>
<img alt="" src="Images/images/separator.gif" />
<label>当前为第</label>
<input type="text" size="1" id="lblNum" style="text-align:center"/>
<label>页</label>
<img alt="" src="Images/images/separator.gif" />
<img alt="下一页" src="Images/images/next.gif" id = "lbtnNext"/>
<img alt="最后一页" src="Images/images/last.gif" id="lbtnLast"/>
<img alt="" src="Images/images/separator.gif" />
<label id="lblCount" runat="server" visible="True"/>
</div>
</div>
本页的JS以及底部工具条的样式代码：
<style type="text/css">
#init
{
background-image:Images/images/bg.gif;
border:1px solid #DADADA;
width:490px;
}
#toolBar
{
border:1px solid #DADADA;
background-color:#d7d7d7;
background-image:Images/images/wbg.gif;
background-repeat:repeat;
}
body,div {
font-size:13px;
font-family:Verdana;
}
.pointer
{
cursor:pointer;
}
</style>
<script src="JQuery/jquery.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var count = '<%=Session["count"] %>';//总记录数
var str;//需要分几页
var select;//下拉列表每页显示多少条
var Cpage=1;//由此参数和str的比较来确定page参数的值
var page;//需要传的参数
$(function(){
select = parseInt($("#EveryPageNum").val());
//判断分多少页
if(count%select==0){
str=parseInt(count/select);
}else{
str =(parseInt(count/select))+1;
}
$("#lblNum").val("1");
$("#lblCount").text("共"+str+"页,共"+count+"条数据");
$("#lbtnPrev").attr("src","Images/images/prev_disabled.gif");
$("#lbtnNext").addClass("pointer");
$("#lbtnFirst").attr("src","Images/images/first_disabled.gif");
$("#lbtnLast").addClass("pointer");
//页面加载的时候默认每页5条数据
$.ajax({
url:"Default6.aspx?pageSize=5",
data:null,
type:"post",
success:function(result){
$("#host").html(result);
}
})
//下拉列表每页条数改变的时候
$("#EveryPageNum").change(function(){
$.ajax({
url:"Default6.aspx?pageSize="+$(this).val()+"&time="+new Date().getTime(),
data:null,
type:"post",
success:function(result){
$("#host").html(result);
GetPageSize();
}
})
})
//点击首页的click事件
$("#lbtnFirst").click(function(){
$.ajax({
url:"Default6.aspx?page=1&pageSize="+$("#EveryPageNum").val()+"&time="+new Date().getTime(),
data:null,
type:"post",
success:function(result){
$("#host").html(result);
Cpage=1;
page=1;
$("#lblNum").val("1");
$("#lbtnFirst").attr("src","Images/images/first_disabled.gif").removeClass("pointer");
$("#lbtnNext").attr("src","Images/images/next.gif").addClass("pointer");
$("#lbtnPrev").attr("src","Images/images/prev_disabled.gif").removeClass("pointer");
$("#lbtnLast").attr("src","Images/images/last.gif").addClass("pointer");
}
})
})
//点击上一页的click事件
$("#lbtnPrev").click(function(){
if(Cpage>=2){
page = --Cpage;
$.ajax({
url:"Default6.aspx?page="+page+"&pageSize="+$("#EveryPageNum").val()+"&time="+new Date().getTime(),
data:null,
type:"post",
success:function(result){
$("#host").html(result);
$("#lblNum").val(page);
$("#lbtnNext").attr("src","Images/images/next.gif").addClass("pointer");
$("#lbtnLast").attr("src","Images/images/last.gif").addClass("pointer");
}
})
}
if(page<=1)
{
$("#lbtnPrev").attr("src","Images/images/prev_disabled.gif").removeClass("pointer");
$("#lbtnFirst").attr("src","Images/images/first_disabled.gif").removeClass("pointer");
}
})
//点击下一页的click事件
$("#lbtnNext").click(function(){
if(Cpage<str){
page = ++Cpage;
$.ajax({
url:"Default6.aspx?page="+page+"&pageSize="+$("#EveryPageNum").val()+"&time="+new Date().getTime(),
data:null,
type:"post",
success:function(result){
$("#host").html(result);
$("#lblNum").val(page);
$("#lbtnPrev").attr("src","Images/images/prev.gif").addClass("pointer");
$("#lbtnFirst").attr("src","Images/images/first.gif").addClass("pointer");
}
})
}
if(page>=str)
{
$("#lbtnNext").attr("src","Images/images/next_disabled.gif").removeClass("pointer");
$("#lbtnLast").attr("src","Images/images/last_disabled.gif").removeClass("pointer");
}
})
//点击最后一页的click事件
$("#lbtnLast").click(function(){
$.ajax({
url:"Default6.aspx?page="+str+"&pageSize="+$("#EveryPageNum").val()+"&time="+new Date().getTime(),
type:"post",
data:null,
success:function(result){
$("#host").html(result);
Cpage=str;
page=str;
$("#lblNum").val(str);
$("#lbtnFirst").attr("src","Images/images/first.gif").addClass("pointer");
$("#lbtnNext").attr("src","Images/images/next_disabled.gif").removeClass("pointer");
$("#lbtnPrev").attr("src","Images/images/prev.gif").addClass("pointer");
$("#lbtnLast").attr("src","Images/images/last_disabled.gif").removeClass("pointer");
}
})
})
})
function GetPageSize()
{
select =parseInt($("#EveryPageNum").val());
if(count%select==0){
str=parseInt(count/select);
}else{
str=(parseInt(count/select))+1;
}
$("#lblNum").val("1");
$("#lblCount").text("共"+str+"页,共"+count+"条数据");
$("#lbtnPrev").attr("src","Images/images/prev_disabled.gif").removeClass("pointer");
$("#lbtnNext").attr("src","Images/images/next.gif").addClass("pointer");
$("#lbtnFirst").attr("src","Images/images/first_disabled.gif").removeClass("pointer");
$("#lbtnLast").attr("src","Images/images/last.gif").addClass("pointer");
Cpage=1;
page=1;
}
)}
所提交到的页面的aspx页面以及后台代码(在本例中也就是Default6.aspx)：
前台：
<body>
<form id="form1" runat="server">
<div id="dr">
<asp:Repeater ID="repeater" runat="server">
<ItemTemplate>
<asp:Panel ID="plEdit" runat="server">
<tr>
<td><%# DataBinder.Eval(Container.DataItem,"id") %></td>
<td><%# DataBinder.Eval(Container.DataItem,"username") %></td>
<td><%# DataBinder.Eval(Container.DataItem,"userpwd") %></td>
</tr>
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
后台代码：
Load事件：
int pageNum;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
pageNum =Convert.ToInt32(Request.QueryString["pageSize"]);
getRepeter();
}
}
public void getRepeter()
{
Class1 c = new Class1();
string sql = "select * from users";
SqlCommand cmd = new SqlCommand(sql, c.Conn);
DataSet ds = new DataSet();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(ds);
PagedDataSource pds = new PagedDataSource();
pds.DataSource = ds.Tables[0].DefaultView;
pds.AllowPaging = true;
pds.PageSize = pageNum;
int currentpage;
if (Request.QueryString["page"] != null && Convert.ToInt32(Request.QueryString["page"].ToString()) >= 1)
{
currentpage = Convert.ToInt32(Request.QueryString["page"]);
pds.CurrentPageIndex = currentpage - 1;
}
repeater.DataSource = pds;
repeater.DataBind();
Response.Clear();
StringWriter sw = new StringWriter();
HtmlTextWriter htw = new HtmlTextWriter(sw);
repeater.RenderControl(htw);
Response.Write(sw.ToString());
Response.End();
}
