<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="PagingTestDome1.Index"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script src="js/jquery-1.6.2.min.js"></script>
<title></title>
<style type="text/css">
a{
text-decoration:none;color:#686868;
}
a:hover{
color:#6287ef;
}
.page_set{
float:left;
margin-top:50px;
}
.table_content{
text-align:center;
}
.page_set a
{
border:0.5px solid #999;
padding:1px 4px;
}
.page_set p
{
display:inline;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>假分页--删除</h3>
<asp:Repeater ID="rp_news" runat="server" OnItemDataBound="rp_news_ItemDataBound" OnItemCommad="rp_news_ItemCommand">
<HeaderTemplate>
<table id="tableinfo" border="1px" style="border-collapse;"bordercolor="#eeeeee" cellpadding="2px" cellspacing="0">
<tr style="height:22px;background-color:#eeeeee;text-align:center;">
<th style="300px;font-weight:normal;">编号</th>
<th style="300px;font-weight:normal;">商品名</th>
<th style="300px ;font-weight:normal;">价格</th>
<th style="80px;font-weight:normal;">删除</th>
</tr>
<tbody id="trId">
</HeaderTemplate>
<ItemTemplate>
<asp:Panel ID="plItem" runat="server">
<tr style="height:17px;background-color:White;text-align:center;">
<asp:Label ID="lb_ID1" runat="server" Text='<%# Eval("id")%>'></asp:Label>
<td><asp:Label ID="lb_ID" runat="server" Text='<%# Eval("id")%'></aspx:Label></td>
<td><asp:Label ID="lb_name" runat="server" Text='<%# Eval("goodsName")%>'></asp:Label></td>
<td><asp:Label ID="lb_price" runat="server" Text='<%# Eval("price")%>'></asp:Label></td>
<td><asp:ImageButton ID="lbtDelete" ImageUrl="img/delete.png" runat="server" CommandName="Delete"/></td>
</tr>
</asp:Panel>
</ItemTemplate>
<FooterTemplate>
</tbody>
</table>
</FooterTemplate>
</asp:Repeater>
<div class="page_set">
<p id="pages"></p>
<p id="sjzl"></p>
<a href="#" id="btn_first">首页</a>
<a href="#" id="btn_previous">上一页</a>
<a href="#" id="btn_next">下一页</a>
<a href="#" id="btn_last">尾页</a>
<p>转到</p>
<input style="40px;height:16px;" maxlength="5" id="changePage"/>
<p>页</p>
<a href="#" id="btn_change">跳转</a>
</div>
<div class="clear"></div>
<script type="text/javascript">
var pageSize=5;//每页显示的记录条数
var curPage=0;//当前页
var lastPage;//最后页
var direct=0;//方向
var len;//总行数
var page;//总页数
var begin;
var end;
var cPage=0;
$(d0cument).ready(function display(){
len=$("#trId tr").length;//求这个表的总行数，剔除第一行介绍
page=len%pageSize==0?len/pageSize:Math.floor(len/pageSize)+1;//根据记录条数，计算页数
curPage=1;//设置当前为第一页
displayPage(1);//显示第一页
document.getElementById("pages").innerHTML="当前"+curPage+"/"+page+"页";//显示当前多少页
document.getElementById("sjzl").innerHTML="数据总量"+len+"";//显示数据量
$("#btn_first").click(function firstPage(){//首页
curPage=1;
direct=0;
displayPage();
});
$("#btn_previous").click(function frontPage(){//上一页
direct=-1;
displayPage();
});
$("#btn_next").click(function nextPage(){//下一页
direct=1;
displayPage();
});
$("#btn_last").click(function lastPage(){//尾页
curPage=page;
direct=0;
displayPage();
});
$("#btn_change").click(function changePage(){//转页
curPage=document.getElementById("changePage").value*1;
if(!/^[1-9]d*$/.test(curPage)){
alert("请输入正整数");
return;
}
if(curPage>page){
alert("超出数据页面");
return;
}
direct=0;
displayPage();
});
});
function displayPage(){
if(curPage<=1&&direct==-1){
direct=0;
alert("已经是第一页了");
return;
}
else if(curPage >=page&&direct==1){
direct=0;
alert("已经是最后一页了");
return;
}
lastPage=curPage;
//修复当len=1时，curpage计算+得0的bug
if(len>pageSize){
curPage=((curPage+direct+len)%len);
}
else{
curPage=1;
}
document.getElementById("pages").InnerHTML="当前"+curPage+"/"+page+"页";
begin=(curPage-1)*pageSize;//起始记录号
end=begin+1*pageSize-1;//末尾记录号
if(end>len)end=len;
$("#trId tr").hide();//首先，设置这行为隐藏
$("#trId tr").each(function (i){
if((i>=begin&&i<=end))
$(this).show();
});
}
</script>
</div>
</form>
</body>
</html>
后台代码如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using DAL;
using BLL;
using Model;
namespace PagingTestDome1
{
public partial class Index:System.Web.UI.Page
{
protected void Page_Load(object sender,EventArgs e)
{
if(!IsPostBack){
Bind();
}
}
protected void Bind(){
BLL.tbl_goods goods=new BLL.tbl_goods();
IList<Model.tbl_goods> List=new List<Model.tbl_goods>();
List=goods.GetList();
rp_news.DataSource=List;
rp_news.DataBind();
}
protected void rp_news_ItemDataBound(object sender,RepeaterItemEventArgs e)
{
if(e.Item.ItemType==ListItemType.Item||e.Item.ItemType=ListItemType.AlternatingItem)
{
Panel pn=(Panel)e.Item.FindControl("plItem");
Label id=(Label)pn.FindControl("lb_ID1");
Label name=(Label)pn.FindControl("lb_name");
id.Visible=false;
((ImageButton)e.Item.FindControl("lbtDelete")).Attributes.Add("onclick",string.Format("JavaScript:return confirm('你确认要删除{0}吗');",name.Text));
}
}
protected void rp_news_ItemCommand(object source,RepeaterCommandEventArgs e)
{
if(e.CommandName=="Delete")
{
Panel pn=(Panel)e.Item.FindControl("plItem");
Label id=(Label)pn.FindControl("lb_ID1");
int ID=Convert.ToInt32(id.Text);
BLL.tbl_goods goods=new BLL.tbl_goods();
goods.Delete(ID);
Response.Write("<script>alert('删除成功!!!')</Script>");
Bind();
}
}
}
这里的删除按钮是用得ImageButton，这是一个提交按钮，所以点击了之后页面会刷新。
在不能改动太大的前提下，要达到我所需要的效果。
有一个思路就是将当前的页码保存下来，点击删除按钮后，通过jQuery控制它跳到保存下来的页码的那一页
但是在前台页码中，分页处的代码都是html标签，不具有保存页码的功能，所以就需要改下前台的代码了。
将分页处的input标签：
<input style="40px;height:16px;"maxlength=“5“ id="changePage"/>
改为TextBox：
<aspx:TextBox ID="changePage" runat="server" Width="40" Height="16" MaxLength="5"></aspx:TextBox>
用asp.net所带的TextBox来保存页码就可以了
那么，分页的jQuery也需要改一下了
<script type="text/javascript">
var pageSize=5;
var curPage=0;
var lastPage;
var direct=0;
var len;
var page;
var begin;
var end;
var cPage=0;
$(document).ready(function display(){
len=$("#trId tr").length;
page=len%pageSize==0?len/pageSize:Math.floor(len/pageSize)+1;
if(document.getElementById("changePage").value*1==""){
curPage=1;
displayPage(1);
}
else{
curPage=document.getElementById("changePage").value*1;
displayPage(curPage);
}
document.getElementById("pages").innerHTML="当前"+curPage+"/"+page+"页";
document.getElementById("sjzl").innerHTML="数据总量"+len+"";
$("#btn_first").click(function firstPage(){
curPage=1;
direct=0;
displayPage();
$("#changePage").val(curPage);
});
$("#btn_previous").click(function frontPage(){
direct=1;
displayPage();
$("#changePage").val(curPage);
});
$("#btn_next").click(function nextPage(){
direct=1;
displayPage();
$("#changePage").val(curPage);
});
$("#btn_change").click(function lastPage(){
curPage=page;
direct=0;
displayPage();
$("#changePage").val(curPage);
});
$("#btn_change").click(function changePage(){
curPage=document.getElementById("changePage").value*1;
if(!/^[1-9]d*$/.test(curPage)){
alert("请输入正整数");
return;
}
if(curPage>page){
alert("超出数据页面");
return;
}
direct=0;
displayPage();
});
});
function displayPage(){
if(curPage<=1&&direct==-1){
direct=0;
alert("已经是第一页了");
return;
}
else if(curPage>=page&&direct==1){
direct=0;
alert("已经是最后一页了");
return;
}
lastPage=curPage;
//修复当len=1时，curPage计算得0的bug
if(len>pageSize){
curPage=((curPage+direct+len)%len);
}
else{
curPage=1;}
document.getElementById("pages").innerHTML="当前"+curPage+"/"+page+"页";
begin=(curPage-1)*pageSize;
eng=begin+1*pageSize-1;
if(end>len)end=len;
$("#trId tr).hide();
$("#trId tr").each(function(i){
if((i>=begin&&i<=end));
$(this).show();
});
}
</script>