关于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对数据库进行事务处理),在开始之前先来看下面这样的一个页面图: 上面这张图片显示的是从数据库中查询出的出租信息,信息中进行了分页处理,然后每行的前面提 ...
随机推荐
- ansible 常用模块的使用
安装 yum -y install ansible 配置文件/etc/ansible/hosts 模块介绍与使用 ping模块 [root@node1 config]# ansible k8s -m ...
- 贝塞尔曲线 WPF MVVM N阶实现 公式详解+源代码下载
源代码下载 效果图: 本程序主要实现: N阶贝塞尔曲线(通用公式) 本程序主要使用技术 MVVM InterAction 事件绑定 动态添加Canvas的Item 第一部分公式: n=有效坐标点数量 ...
- “全栈2019”Java第三十六章：类
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- [Flex] 组件Tree系列 —— 实现右键拓展功能
主程序mxml: <?xml version="1.0" encoding="utf-8"?> <!--功能描述:结合tree拓展右键功能 必 ...
- linux校验时间
一. 基本方法:date -s "2018-09-02 04:23:45"clock -w 把时间写入cmos(一个RAM芯片) hwclock 查看硬件时间 hwclock ...
- POJ3074 Sudoku
POJ3074 Sudoku 与POJ2676相比,这一题搜索时每一步都找到最好确定的点进行枚举 对于每行.每列.每个九宫格,都分别用一个9位二进制数保存还有那些数还可以填 对于每个位置,将其所在行. ...
- Maven依赖的JAR包下载慢？赶紧看过来
相信许多JAVA开发者在日常工作中时常会碰到这种情况,那就是编译Maven工程时,工程所依赖的jar包文件下载非常慢,甚至经常出现下载不成功的问题,今天,小编就给大家讲讲如何提升Maven依赖包的下载 ...
- docker搭建elk+cerebro环境
ELK的帮助手册 Docker Hub官网:https://hub.docker.com/r/sebp/elk/ Docker ELK使用文档:http://elk-docker.readthedoc ...
- python cookbook
一 .数据结构 python collections包中 deque :固定长度队列,(例如固定长度的cache什么的) defaultdict:如果每个键值不存在,默认返回值 orderdict:有 ...
- python学习，day3： 文件的读写
# coding=utf-8 # Author: RyAn Bi import sys f1 = open('yesterday2',mode='w',encoding='utf-8') #w 只能写 ...