关于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对数据库进行事务处理),在开始之前先来看下面这样的一个页面图: 上面这张图片显示的是从数据库中查询出的出租信息,信息中进行了分页处理,然后每行的前面提 ...
随机推荐
- 谈谈iOS开发如何写个人中心这类页面--静态tableView页面的编写
本文来自 网易云社区 . 一.本文讲的是什么问题? 在开发 iOS 应用时,基本都会遇到个人中心.设置.详情信息等页面,这里截取了某应用的详情编辑页面和个人中心页面,如下: 我们以页面结构的角度考虑这 ...
- win10环境下搭建虚拟环境和 virtualenvwrapper-win 使用
1. 安装 virtualenv pip install virtualenv 2. virtualenv基本操作 cd path/dir # 跳转到dir目录 virtualenv env # 在d ...
- 51nod2004 终结之时 (支配树+树剖+树链的并)
link 我永远喜欢洛天依 给定一张图世末积雨云,你需要维护其支配树: 单点修改,子树修改,树链修改 子树求和,树链求和,多条树链的并集求和 撤销之前的操作 可以先用 Lengauer-Tarjan ...
- js中的类和对象以及自定义对象
js中的类 1.类的声明 function Person(name,age){ this.name=name; this.age=age; this.test=function(a){ alert(a ...
- js 平均分割
let alllist=res.data; var result = []; for (var i = 0; i < alllist.length; i += 3) { result.push( ...
- 将SQLAlchemy对象转化为dict
需求一,将数据对象转为dict,但是不包括relation, import BaseClass #所有模型的基础类 def getDictFromObj_nr(obj): return_dict={} ...
- SimpleITK学习（一）基本概念
断断续续使用simpleitk处理CT和X光图片有些时间了,但是学的知识都比较零散,没有形成系统的概念,于是对着SimpleITK的英文文档https://simpleitk.readthedocs. ...
- python在一堆目录中寻找json文件
在一个目录下,有好几层目录,里面零零散散存放着几个json文件,我要做的是用python脚本把它们都找出来,一开始就一层一层地找,用os.listdir加上for循环,根据目录树的深度确定for循环的 ...
- Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
- jquery ajax的getJSON使用
getJSON的定义和用法 通过 HTTP GET 请求载入 JSON 数据. 在 jQuery 1.2 中,您可以通过使用 JSONP 形式的回调函数来加载其他网域的 JSON 数据,如 " ...