实现分页展示功能

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

两个重要的变量

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. java的poi 读取exc 文件

    package lizikj.bigwheel.shop.util.excel; import java.io.File; import java.io.FileInputStream; import ...

  2. Programming | 中/ 英文词频统计(MATLAB实现)

    一.英文词频统计 英文词频统计很简单,只需借助split断句,再统计即可. 完整MATLAB代码: function wordcount %思路:中文词频统计涉及到对"词语"的判断 ...

  3. 前端vue框架 脚手架

    1.安装node.js最新版本2.cmd下输入 1.node -v得到版本号检测是否安装成功 版本号要在6.9以上 2.npm -v 版本号要在3.10以上3.安装脚手架 1.npm install ...

  4. socketserver实现FTP

    功能: 1.用户加密认证 2.允许同时多用户登录 3.每个用户有自己的家目录 ,且只能访问自己的家目录 4.对用户进行磁盘配额,每个用户的可用空间不同 5.允许用户在ftp server上随意切换目录 ...

  5. IPC_管道

    1.管道特点: 1)单向数据通信 2)匿名管道-常用于(父子进程/有血缘关系的进程之间) 3)命名管道-常用于(无血缘关系进程之间通信) 4)提供一种流式服务(发送和接受不接受字节数的大小,可取任意大 ...

  6. EBS server log日志

    Log file location for Oracle E-Business Suite R12 April 13, 2010 in Oracle Database&EBS General  ...

  7. ZKWeb网页框架1.9正式发布

    1.9.0更新的内容有 更新项目工具 更好的支持Linux 添加工具函数 Exception.ToDetailedString (获取例外的详细信息) Exception.ToSummaryStrin ...

  8. python 使用多进程实现并发编程/使用queue进行进程间数据交换

    import time import os import multiprocessing from multiprocessing import Queue, pool ""&qu ...

  9. Eclipse 中 SVN 插件的安装与使用

    下载和安装SVN插件 插件在线安装 可以选择在线安装插件的方式,就是使用eclipse里Help菜单的“Install New Software”,通过输入SVN地址,直接下载安装到eclipse里. ...

  10. linux 软件安装篇

    在linux下安装软件,不像windows一样,下一步下一步安装,但是也有很方便的方式.也有自定义的安装方式,总体来说,套路还不算太深,但是要实践才能出真知哦! linux版本有很多,但是大部分命令都 ...