作為一個新人，上周負責優化一個後臺管理系統，遇到一個問題:點擊刪除按鈕之後，頁面又回到了第一頁。 而我需要達到的效果是：點擊了刪除按鈕之後，原來是那一頁，刪除後還是在那一頁。 由於項目是已經驗收了的，所以我不能改動太大。我在網上頁找了很久，也有許多解決方案，但都不太適合。 這個系統數據不多，所以用的 ...
作為一個新人，上周負責優化一個後臺管理系統，遇到一個問題:點擊刪除按鈕之後，頁面又回到了第一頁。
而我需要達到的效果是：點擊了刪除按鈕之後，原來是那一頁，刪除後還是在那一頁。
由於項目是已經驗收了的，所以我不能改動太大。我在網上頁找了很久，也有許多解決方案，但都不太適合。
這個系統數據不多，所以用的假分頁,使用了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>
好了，這樣差不多就達到了我所需要的效果了。
結語：我是一個小菜鳥，第一次寫隨筆，歡迎大神指點，不喜勿噴。
