作为一个新人，上周负责优化一个后台管理系统，遇到一个问题:点击删除按钮之后，页面又回到了第一页。
而我需要达到的效果是：点击了删除按钮之后，原来是那一页，删除后还是在那一页。
由于项目是已经验收了的，所以我不能改动太大。我在网上页找了很久，也有许多解决方案，但都不太适合。
这个系统数据不多，所以用的假分页,使用了Repeater控件，后台将数据库中的数据全部查询出来放到Repeater中，在通过jquery进行分页，下面是我写的一个简单的测试项目
前台代码如下：
<%@ 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" OnItemCommand="rp_news_ItemCommand"> <HeaderTemplate> <table id="tableinfo" border="1px" style="border-collapse: collapse;" bordercolor="#eeeeee" cellpadding="2px" cellspacing="0"> <tr style="height:22px; background-color:#eeeeee; text-align:center;"> <th style="width:300px; font-weight:normal;">编号</th> <th style="width:300px; font-weight:normal;">商品名</th> <th style="width:300px; font-weight:normal;">价格</th> <th style="width: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")%>'></asp: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="width: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; $(document).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))//显示begin<=x<=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="width:40px;height:16px;" maxlength="5" id="changePage" />
改为TextBox：
<asp:TextBox ID="changePage" runat="server" Width="40" Height="16" MaxLength="5"></asp: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_last").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; // 起始记录号 end = begin + 1 * pageSize - 1; // 末尾记录号 if (end > len) end = len; $("#trId tr").hide(); // 首先，设置这行为隐藏 $("#trId tr").each(function (i) { // 然后，通过条件判断决定本行是否恢复显示 if ((i >= begin && i <= end))//显示begin<=x<=end的记录 $(this).show(); }); } </script>
好了，这样差不多就达到了我所需要的效果了。
结语：我是一个小菜鸟，第一次写随笔，欢迎大神指点，不喜勿喷。
相关文章![[面向对象杂谈]接口与多态](/Upload/SmallIMG/2017061705/AEC6671F5E401E98.png)
