关于asp.net假分页的删除操作的随笔

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="PagingTestDome1.Index"%>

<!DOCTYPE html>

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>

<div>

<asp:Repeater ID="rp_news" runat="server" OnItemDataBound="rp_news_ItemDataBound" OnItemCommad="rp_news_ItemCommand">

</tr>

</HeaderTemplate>

<asp:Panel ID="plItem" runat="server">

<asp:Label ID="lb_ID1" runat="server" Text='<%# Eval("id")%>'></asp:Label>

</tr>

</asp:Panel>

</ItemTemplate>

</tbody>

</table>

</FooterTemplate>

</asp:Repeater>

</div>

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标签：

改为TextBox：

<aspx:TextBox ID="changePage" runat="server" Width="40" Height="16" MaxLength="5"></aspx:TextBox>

用asp.net所带的TextBox来保存页码就可以了

那么，分页的jQuery也需要改一下了

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>