WebFrom 小程序【分页功能 】
实现分页展示功能
基本功能:上一页、下一页、首页、尾页、跳转
两个重要的变量
1、每页显示几条数据
2、现在是第几页
}
/*表格样式*/
.tab {
width: %;
background-color: blue;
text-align: center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="div1">奇点0216班学生信息</div>
<div>
<a href="zhuce.aspx" target="_blank">添加新同学</a>
</div>
<%--使用 Repeater 添加数据--%>
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<%-- 头模板--%>
<table class="tab">
<tr style="color: white; height: 30px;">
<td>编号</td>
<td>用户名</td>
<td>密码</td>
<td>昵称</td>
<td>性别</td>
<td>生日</td>
<td>年龄</td>
<td>民族</td>
<td>设置</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<%-- 项模板--%>
<tr style="background-color: white;">
<td><%#Eval("Ids") %></td>
<td><%#Eval("Username") %></td>
<td><%#Eval("Password") %></td>
<td><%#Eval("Nickname") %></td>
<td><%#Eval("Sexstr") %></td>
<td><%#Eval("Birthdaystr") %></td>
<td><%#Eval("Age") %></td>
<td><%#Eval("NationName") %></td>
<td>
<a href="xiugai.aspx?i=<%#Eval("Ids") %>">编辑 </a>
<a onclick="return confirm('是否要删除<%#Eval("NickName") %>?');" href="shanchu.aspx?i=<%#Eval("Ids") %>">删除</a>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
<%--脚模板--%>
</table>
</FooterTemplate>
</asp:Repeater>
<br /><br /><br />
当前第[ <asp:Label ID="Lab1" runat="server" Text=""></asp:Label> ]页
共[ <asp:Label ID="Lab2" runat="server" Text=""></asp:Label> ]页
<asp:Button ID="but_first" runat="server" Text="首页" />
<asp:Button ID="but_up" runat="server" Text="上一页" />
<asp:Button ID="but_down" runat="server" Text="下一页" />
<asp:Button ID="but_last" runat="server" Text="尾页" />
<asp:DropDownList ID="Dr1" runat="server"></asp:DropDownList>
<asp:Button ID="but_jump" runat="server" Text="跳转" />
</form>
</body>
</html>
前台
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page
{
int PageCount = ; //每页显示条数 protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//只在第一次加载时执行的代码
//数据展示时不需要,数据展示要展示最新数据
Repeater1.DataSource = new usersData().selecttop(PageCount, );
Repeater1.DataBind(); Lab2.Text = pageAll().ToString(); //总页数 for (int i = ; i <= pageAll(); i++)
{
ListItem li = new ListItem();
li.Text = i.ToString ();
li.Value = i.ToString (); Dr1.Items.Add(li); } } but_first.Click += but_first_Click;
but_last.Click += but_last_Click;
but_up.Click += but_up_Click;
but_down.Click += but_down_Click;
but_jump.Click += but_jump_Click; } //跳转
void but_jump_Click(object sender, EventArgs e)
{
int lab =Convert .ToInt32 ( Dr1.SelectedValue); Repeater1.DataSource = new usersData().selecttop(PageCount, lab);
Repeater1.DataBind(); Lab1.Text = lab.ToString();
} //下一页
void but_down_Click(object sender, EventArgs e)
{
//获取当前页,计算下一页
int lab = Convert.ToInt32(Lab1.Text) + ; if (lab > pageAll())
{
return;
} //绑定下一页数据
Repeater1.DataSource = new usersData().selecttop(PageCount, lab);
Repeater1.DataBind(); //修改当前显示的页数
Lab1.Text = lab.ToString(); } //上一页
void but_up_Click(object sender, EventArgs e)
{
//获取当前页,计算上一页
int lab = Convert.ToInt32(Lab1.Text) - ; if (lab < )
{
return;
} //绑定下一页数据
Repeater1.DataSource = new usersData().selecttop(PageCount, lab);
Repeater1.DataBind(); //修改当前显示的页数
Lab1.Text = lab.ToString();
} //尾页
void but_last_Click(object sender, EventArgs e)
{
Repeater1.DataSource = new usersData().selecttop(PageCount, pageAll());
Repeater1.DataBind(); Lab1.Text = pageAll().ToString();
} //首页
void but_first_Click(object sender, EventArgs e)
{
Repeater1.DataSource = new usersData().selecttop(PageCount, );
Repeater1.DataBind(); Lab1.Text = "";
} //计算有多少页
public int pageAll()
{
int a = ; int All = new usersData().SelectCount(); decimal d = Convert.ToDecimal(All) / PageCount; //int 除以 int 会自动去掉小数点, a = Convert.ToInt32(Math.Ceiling(d)); //取上限 return a;
} }
后台
AutoPostBack="true" --自动提交
DropDownList1.SelectedIndexChanged------ -- 与之相对应的委托事件
效果图

WebFrom 小程序【分页功能 】的更多相关文章
- [转] 扩展微信小程序框架功能
通过第三方 JavaScript 库,扩展微信小程序框架功能. 扩展微信小程序框架功能(1)——Promise ES6 对 Promise 有了原生的支持,但微信开发者工具更新版本(0.11.1122 ...
- SpringBoot2.0小程序支付功能实现weixin-java-pay
SpringBoot2.0小程序支付功能实现weixin-java-pay WxJava - 微信开发 Java SDK(开发工具包); 支持包括微信支付.开放平台.公众号.企业微信/企业号.小程序等 ...
- 微信小程序的功能开发工具跟公众号的差别,小程序是一种减负思维对简单APP是巨大打击
微信小程序的功能开发工具跟公众号的差别,小程序是一种减负思维对简单APP是巨大打击 摘要: 小程序和公众号最大的区别有如下四点:1.小程序没有粉丝,开发者在后台能看到的只能是累计用户访问数以及实时统计 ...
- 微信小程序 --- 完成小程序支付功能
最近开发小程序,一直在看小程序的支付.经过一天的努力,小程序支付功能最终实现了. 下面感谢 csdn 博主:千堆雪惹尘埃 发布的 " 小程序与php 实现微信支付 " 原文地址: ...
- 微信小程序保存图片功能实现
小程序保存图片功能实现 wxml: <view class="previewImage" style="display:{{previewImage}}" ...
- 微信小程序支付功能 C# .NET开发
微信小程序支付功能的开发的时候坑比较多,不过对于钱的事谨慎也是好事.网上关于小程序支付的实例很多,但是大多多少有些问题,C#开发的更少.此篇文档的目的是讲开发过程中遇到的问题做一个备注,也方便其他开发 ...
- 微信小程序 - 定位功能
(1) 查看微信小程序文档 大家可以从我截图中可以看到,API中的返回值有纬度和经度,所以我们接下来就是要用到纬度和经度逆地址解析出地址的一些信息. (2)注册腾讯地图开放平台 注册完之后选择WebS ...
- 微信小程序支付功能前端流程
只是分享一下小程序支付功能的前端流程和代码, 仅供参考(使用的是uni app). handleCreate () { /** 第一步:前台将商品数据发送到后台,后台创建订单入库并返回订单id等信息 ...
- 微信小程序--分享功能
微信小程序--分享功能 微信小程序前段时间开放了小程序右上角的分享功能, 可以分享任意一个页面到好友或者群聊, 但是不能分享到朋友圈 这里有微信开发文档链接:点击跳转到微信分享功能API 入口方法: ...
- 微信小程序——倒计时功能
做小程序项目中,需要做一个倒计时功能,如下图: 记录一下实现步骤: 1.考虑到这个功能可能会有多处用到,所以把倒计时的函数写在utils.js里面: const formatNumber = n =& ...
随机推荐
- 2019.02.11 bzoj1568: [JSOI2008]Blue Mary开公司(线段树)
传送门 题意简述:维护整体加一条线段,求单点极值. 思路: 直接上李超线段树维护即可. 代码: #include<bits/stdc++.h> #define ri register in ...
- adb Android Debug Bridge 安卓调试桥
adb devices 获取设备列表及设备状态 adb get-state 获取设备的状态,设备的状态有 3 钟,device , offline , unknown device:设备正常连接 of ...
- JAVA 8 主要新特性 ----------------(四)Lambda函数式接口
一.什么是函数式接口 只包含一个抽象方法的接口,称为函数式接口. 你可以通过 Lambda 表达式来创建该接口的对象.(若 Lambda 表达式抛出一个受检异常,那么该异常需要在目标接口的抽象方法 ...
- spring生命周期流程图
Spring作为当前Java最流行.最强大的轻量级框架,受到了程序员的热烈欢迎.准确的了解Spring Bean的生命周期是非常必要的.我们通常使用ApplicationContext作为Spring ...
- Codeforces Round #512 (Div. 2) D. Vasya and Triangle
参考了别人的思路:https://blog.csdn.net/qq_41608020/article/details/82827632 http://www.cnblogs.com/qywhy/p/9 ...
- 机器学习之KNN算法
1 KNN算法 1.1 KNN算法简介 KNN(K-Nearest Neighbor)工作原理:存在一个样本数据集合,也称为训练样本集,并且样本集中每个数据都存在标签,即我们知道样本集中每一数据与所属 ...
- i春秋SRC部落携手同程SRC发布首届漏洞提交任务
[部落守卫者集结令]拿巨额奖金?上白帽子排行榜?近距离膜拜大佬?学技术?掌握窍门?又或者你是个责任感爆棚想要互联网行业安全的有志青年?加入i春秋部落守卫者(The Guarders),统统满足你! [ ...
- Java 实现将其他类型数据转换成 JSON 字符串工具类
这是网上一个大神实现的,具体出处已找不到,在这做个记录,方便以后使用. package com.wb.test; import java.beans.IntrospectionException; i ...
- Http请求-get和post的区别
GET和POST是HTTP请求的两种基本方法. 最直观的区别就是GET把参数包含在URL中,以?的方式来进行拼接,POST通过request body传递参数.并且GET请求在URL中传送的参数是有长 ...
- web自动化测试---概述
最早的时候是做功能测试,web都是自己手工点击看看有没问题,没有系统的进行测试,更别说自动化测试了,那是一段不堪回首的往事,就是因为这,很多问题都流出去了,这是作为测试人员的一大失职,痛定思痛,开始学 ...