实现分页展示功能

基本功能:上一页、下一页、首页、尾页、跳转

两个重要的变量

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 小程序【分页功能 】的更多相关文章

  1. [转] 扩展微信小程序框架功能

    通过第三方 JavaScript 库,扩展微信小程序框架功能. 扩展微信小程序框架功能(1)——Promise ES6 对 Promise 有了原生的支持,但微信开发者工具更新版本(0.11.1122 ...

  2. SpringBoot2.0小程序支付功能实现weixin-java-pay

    SpringBoot2.0小程序支付功能实现weixin-java-pay WxJava - 微信开发 Java SDK(开发工具包); 支持包括微信支付.开放平台.公众号.企业微信/企业号.小程序等 ...

  3. 微信小程序的功能开发工具跟公众号的差别,小程序是一种减负思维对简单APP是巨大打击

    微信小程序的功能开发工具跟公众号的差别,小程序是一种减负思维对简单APP是巨大打击 摘要: 小程序和公众号最大的区别有如下四点:1.小程序没有粉丝,开发者在后台能看到的只能是累计用户访问数以及实时统计 ...

  4. 微信小程序 --- 完成小程序支付功能

    最近开发小程序,一直在看小程序的支付.经过一天的努力,小程序支付功能最终实现了. 下面感谢 csdn 博主:千堆雪惹尘埃 发布的 " 小程序与php 实现微信支付 " 原文地址: ...

  5. 微信小程序保存图片功能实现

    小程序保存图片功能实现 wxml: <view class="previewImage" style="display:{{previewImage}}" ...

  6. 微信小程序支付功能 C# .NET开发

    微信小程序支付功能的开发的时候坑比较多,不过对于钱的事谨慎也是好事.网上关于小程序支付的实例很多,但是大多多少有些问题,C#开发的更少.此篇文档的目的是讲开发过程中遇到的问题做一个备注,也方便其他开发 ...

  7. 微信小程序 - 定位功能

    (1) 查看微信小程序文档 大家可以从我截图中可以看到,API中的返回值有纬度和经度,所以我们接下来就是要用到纬度和经度逆地址解析出地址的一些信息. (2)注册腾讯地图开放平台 注册完之后选择WebS ...

  8. 微信小程序支付功能前端流程

    只是分享一下小程序支付功能的前端流程和代码, 仅供参考(使用的是uni app). handleCreate () { /** 第一步:前台将商品数据发送到后台,后台创建订单入库并返回订单id等信息 ...

  9. 微信小程序--分享功能

    微信小程序--分享功能 微信小程序前段时间开放了小程序右上角的分享功能, 可以分享任意一个页面到好友或者群聊, 但是不能分享到朋友圈 这里有微信开发文档链接:点击跳转到微信分享功能API 入口方法: ...

  10. 微信小程序——倒计时功能

    做小程序项目中,需要做一个倒计时功能,如下图: 记录一下实现步骤: 1.考虑到这个功能可能会有多处用到,所以把倒计时的函数写在utils.js里面: const formatNumber = n =& ...

随机推荐

  1. 源码管理工具Git-windows平台使用Gitblit搭建Git服务器

    原文地址:https://blog.csdn.net/smellmine/article/details/52139299 搭建Git服务器,请参照上面链接. 注意: 第十二步:以Windows Se ...

  2. VIP之Switch

    Switch II 最大能连接12路输入与12路输出 不能合并数据数 每个输入可以驱动多个输出 每个输出只能被一个输入驱动 当输入没有连接到输出时,可以禁止掉 每个被禁止的输入可以设置成停止或者消耗模 ...

  3. delphi如何在form显示出来后处理指定的事件(例如自动登录)

    最近写一个delphi客户端,遇到一个自动登录问题,已经解决了思路如下: 1.在Form的oncreate事件中读取用户配置文件,检查及处理是否保存了用户密码,是否自动登录,如果需要自动登录, 自动登 ...

  4. yesno孤立词识别kaldi脚本

    path.sh主要设定路径等 export KALDI_ROOT=`pwd`/../../.. [ -f $KALDI_ROOT/tools/env.sh ] && . $KALDI_ ...

  5. Interview Common Sample Codes

    1. Quick Sort: int partition(int A[], int p, int r) { int x = A[r]; // Pivot element int i = p - 1; ...

  6. idea集成tomcat

    1 Tomcat的使用 * Tomcat:web服务器软件 1. 下载:http://tomcat.apache.org/ 2. 安装:解压压缩包即可. * 注意:安装目录建议不要有中文和空格 3. ...

  7. Ngon 是啥

    https://www.gamefromscratch.com/post/2011/07/11/So-whats-an-ngon-anyways.aspx 在 blender 里面 Add 一个 Cy ...

  8. JavaScript中JSON对象和JSON字符串的相互转化

    一.JSON字符串转换为JSON对象 var str = '{"name":"cxh","sex":"man",&quo ...

  9. H5的Page Visibility API

    概述 哈哈,又学了一个H5的API.今天突然对动态获取网页的选中状态很感兴趣,然后去查了下,发现真的有个API控制它--Page Visibility API.于是把学到的东西记录下来,供以后开发时参 ...

  10. Java学习笔记43(打印流、IO流工具类简单介绍)

    打印流: 有两个类:PrintStream,PrintWriter类,两个类的方法一致,区别在于构造器 PrintStream:构造方法:接收File类型,接收字符串文件名,接收字节输出流(Outpu ...