作为一个新人,上周负责优化一个后台管理系统,遇到一个问题:点击删除按钮之后,页面又回到了第一页。

而我需要达到的效果是:点击了删除按钮之后,原来是那一页,删除后还是在那一页。

由于项目是已经验收了的,所以我不能改动太大。我在网上页找了很久,也有许多解决方案,但都不太适合。

这个系统数据不多,所以用的假分页,使用了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 type=“text” 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 type="text" 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>

好了,这样差不多就达到了我所需要的效果了。

结语:我是一个小菜鸟,第一次写随笔,欢迎大神指点,不喜勿喷。