关于asp.net假分页的删除操作的随笔
作为一个新人，上周负责优化一个后台管理系统，遇到一个问题:点击删除按钮之后，页面又回到了第一页。
而我需要达到的效果是：点击了删除按钮之后，原来是那一页，删除后还是在那一页。
由于项目是已经验收了的，所以我不能改动太大。我在网上页找了很久，也有许多解决方案，但都不太适合。
这个系统数据不多，所以用的假分页,使用了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:#;
}
a:hover{
color:#6287ef;
}
.page_set
{
float: left;
margin-top: 50px;
} .table_content
{
text-align: center;
}
.page_set a
{
border: .5px solid #;
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="">
<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="" id="changePage" />
<p>页 </p>
<a href="#" id="btn_change">跳转</a>
</div>
<div class="clear"></div>
<script type="text/javascript">
var pageSize = ; //每页显示的记录条数
var curPage = ; //当前页
var lastPage; //最后页
var direct = ; //方向
var len; //总行数
var page; //总页数
var begin;
var end;
var cPage=;
$(document).ready(function display() {
len = $("#trId tr").length; // 求这个表的总行数，剔除第一行介绍
page = len % pageSize == ? len / pageSize : Math.floor(len / pageSize) + ; //根据记录条数，计算页数
curPage = ; // 设置当前为第一页
displayPage(); //显示第一页
document.getElementById("pages").innerHTML = "当前 " + curPage + "/" + page + " 页 "; // 显示当前多少页
document.getElementById("sjzl").innerHTML = "数据总量 " + len + ""; // 显示数据量
$("#btn_first").click(function firstPage() { // 首页
curPage = ;
direct = ;
displayPage();
});
$("#btn_previous").click(function frontPage() { // 上一页
direct = -;
displayPage();
});
$("#btn_next").click(function nextPage() { // 下一页
direct = ;
displayPage();
});
$("#btn_last").click(function lastPage() { // 尾页
curPage = page;
direct = ;
displayPage();
});
$("#btn_change").click(function changePage() { // 转页
curPage = document.getElementById("changePage").value * ;
if (!/^[-]\d*$/.test(curPage)) {
alert("请输入正整数");
return;
}
if (curPage > page) {
alert("超出数据页面");
return;
}
direct = ;
displayPage();
});
});
function displayPage() {
if (curPage <= && direct == -) {
direct = ;
alert("已经是第一页了");
return;
} else if (curPage >= page && direct == ) {
direct = ;
alert("已经是最后一页了");
return;
} lastPage = curPage; // 修复当len=1时，curPage计算+得0的bug
if (len > pageSize) {
curPage = ((curPage + direct + len) % len);
} else {
curPage = ;
}
document.getElementById("pages").innerHTML = "当前 " + curPage + "/" + page + " 页 "; // 显示当前多少页
begin = (curPage - ) * pageSize; // 起始记录号
end = begin + * pageSize - ; // 末尾记录号
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="" id="changePage" />
改为TextBox：
<asp:TextBox ID="changePage" runat="server" Width="" Height="" MaxLength=""></asp:TextBox>
用asp.net所带的TextBox来保存页码就可以了。
那么，分页的jquery也需要改一下了：
<script type="text/javascript">
var pageSize = ; //每页显示的记录条数
var curPage = ; //当前页
var lastPage; //最后页
var direct = ; //方向
var len; //总行数
var page; //总页数
var begin;
var end;
var cPage=; $(document).ready(function display() {
len = $("#trId tr").length; // 求这个表的总行数，剔除第一行介绍
page = len % pageSize == ? len / pageSize : Math.floor(len / pageSize) + ; //根据记录条数，计算页数
if (document.getElementById("changePage").value * == "") {
curPage = ; // 设置当前为第一页
displayPage(); //显示第一页
} else {
curPage = document.getElementById("changePage").value * ;
displayPage(curPage);//跳转到保存的页码处
} document.getElementById("pages").innerHTML = "当前 " + curPage + "/" + page + " 页 "; // 显示当前多少页
document.getElementById("sjzl").innerHTML = "数据总量 " + len + ""; // 显示数据量 $("#btn_first").click(function firstPage() { // 首页
curPage = ;
direct = ;
displayPage();
$("#changePage").val(curPage);//保存页码
});
$("#btn_previous").click(function frontPage() { // 上一页
direct = -;
displayPage();
$("#changePage").val(curPage);//保存页码
});
$("#btn_next").click(function nextPage() { // 下一页
direct = ;
displayPage();
$("#changePage").val(curPage);//保存页码
});
$("#btn_last").click(function lastPage() { // 尾页
curPage = page;
direct = ;
displayPage();
$("#changePage").val(curPage);//保存页码
});
$("#btn_change").click(function changePage() { // 转页
curPage = document.getElementById("changePage").value * ;
if (!/^[-]\d*$/.test(curPage)) {
alert("请输入正整数");
return;
}
if (curPage > page) {
alert("超出数据页面");
return;
}
direct = ;
displayPage();
});
});
function displayPage() {
if (curPage <= && direct == -) {
direct = ;
alert("已经是第一页了");
return;
} else if (curPage >= page && direct == ) {
direct = ;
alert("已经是最后一页了");
return;
} lastPage = curPage; // 修复当len=1时，curPage计算+得0的bug
if (len > pageSize) {
curPage = ((curPage + direct + len) % len);
} else {
curPage = ;
} document.getElementById("pages").innerHTML = "当前 " + curPage + "/" + page + " 页 "; // 显示当前多少页 begin = (curPage - ) * pageSize; // 起始记录号
end = begin + * pageSize - ; // 末尾记录号 if (end > len) end = len;
$("#trId tr").hide(); // 首先，设置这行为隐藏
$("#trId tr").each(function (i) { // 然后，通过条件判断决定本行是否恢复显示
if ((i >= begin && i <= end))//显示begin<=x<=end的记录
$(this).show();
});
} </script>
好了，这样差不多就达到了我所需要的效果了。
结语：我是一个小菜鸟，第一次写随笔，欢迎大神指点，不喜勿喷。
关于asp.net假分页的删除操作的随笔的更多相关文章
- MyBatisPlus分页查询,删除操作
分页查询 分页查询在网页使用十分之多 原始的limit进行分页 pageHelper第三方插件 3. MP内置的分页插件 导入配置 如何使用,官网的代码如下 //分页插件 @Bean public P ...
- ASP.NET MVC3 实例(六) 增加、修改和删除操作(二)
http://www.jquery001.com/asp.net-mvc3-instance-add-update-delete2.html 上篇我们在 ASP.NET MVC3 中实现了添加操作,由 ...
- Asp.Net MVC +EntityFramework主从表新增编辑操作的实现(删除操作怎么实现？)
Asp.Net MVC +EntityFramework主从表新增编辑操作的实现 对于MVC中同时对主从表的表单操作在网上现有的解决很少,而这样的操作在做业务系统中是经常为遇到的.我在网上搜索了很久都 ...
- ASP入门（二十三）- 数据库插入、更新和删除操作
我们这里介绍如何使用 Recordset 对象进行插入.更新和删除操作,顺便和 SQL 语句对比. 插入记录 AddNew 方法用于插入一条记录,首先打开一个记录集,并且这个记录具备可写特性,而后调用 ...
- 在分页中，删除操作后，AJAX重载刷新当前页
需求 分页中,在 删除 和 编辑 完成后,AJAX重载刷新 当前页 ,而不是跳转到 第一页 实现步骤 添加两个的 input 控件,用来存储 当前页数 和 记录总条数(非必须,能有方法获取到这两个值即 ...
- ASP.NET（四）：ASP.net实现假分页显示数据
导读:在做数据查询的时候,有的时候查询到的数据有很多.通常呢,我们一般都是去拖动右侧边的滚动条.但是,有了分页后,我们就可以不必是使用滚动条,而直接通过分页查看我们想要的数据.在分页的过程中,有分为真 ...
- ASP.NET——真假分页
所谓分页,就是把所有要显示的内容分成n多页来显示.那为什么要用分页而不直接全部显示呢?这就好比一本书,我们可以用一张纸写完全部书的内容,但实际上并不是这么做的.我们把网页分成一页一页的,其实很大程度上 ...
- Asp.Net真分页技术
最近学校要做课题,闲来没事研究了下Asp.net的分页,我使用Repeater进行数据的绑定,每次从数据库读取到8条数据填充到Repeater中,这样搞可以降低数据库的压力,提高效率. 效果图如下: ...
- mySql事务_ _Java中怎样实现批量删除操作（Java对数据库进行事务处理）?
本文是记录Java中实现批量删除操作(Java对数据库进行事务处理),在开始之前先来看下面这样的一个页面图: 上面这张图片显示的是从数据库中查询出的出租信息,信息中进行了分页处理,然后每行的前面提 ...
随机推荐
- codeforces|CF13C Sequence
大概的题意就是每次可以对一个数加一或者减一,然后用最小的代价使得原序列变成不下降的序列. 因为是最小的代价,所以到最后的序列中的每个数字肯定在原先的序列中出现过.(大家可以想一下到底是为什么,或者简单 ...
- 二十五、MongoDB 索引 和 explain 的使用
一.索引基础 索引是对数据库表中一列或多列的值进行排序的一种结构,可以让我们查询数据库变得更快.MongoDB 的索引几乎与传统的关系型数据库一模一样,这其中也包括一些基本的查询优化技巧.创建索引的命 ...
- zTree API中刷新树没效果
想刷新树,但是根据API来的refresh无效 ---------------------------------------------------------------------------- ...
- c调用 lua 栈操作
转自https://www.cnblogs.com/ringofthec/archive/2010/10/22/lua.html 打算记录一些lua_api, 可能会觉得lua文档中已经说的很清楚了, ...
- jquery全屏幻灯轮播焦点图
<!--banner s--> <div class="banner"> <div class="hd"> <ul&g ...
- P4168 [Violet]蒲公英 区间众数
$ \color{#0066ff}{ 题目描述 }$ 在乡下的小路旁种着许多蒲公英,而我们的问题正是与这些蒲公英有关. 为了简化起见,我们把所有的蒲公英看成一个长度为n的序列 \((a_1,a_2.. ...
- POJ3321 Apple Tree (JAVA)
树形数组题,有一定难度. 首先得搞清楚树形数组是什么 - 它是建立在原始数组上的统计数组 - 目的:方便对原始数组进行切片统计,主要用于统计切片的累加和 其实你可以对切片进行扫描,把元素一个一个加起来 ...
- python简介和环境搭建
简介: python 是一种解释型.面向对象编程语言 由 Guido van Rossum 于1989年底发明, 第一个公开发行版发行于1991年, 最初被设计用于编写自动化脚本(shell) ...
- Rstudio常用且不熟快捷键 “原版+中文” 整理
- [HDU4035] Maze（概率DP）
HDU4035 有\(n\)个房间 , 由\(n-1\)条隧道连通起来 , 实际上就形成了一棵树 , 从结点\(1\)出发 , 开始走 , 在每个结点\(i\)都有\(3\)种可能 : \(1.\)被 ...