分页无论是前端和后端,基本都有广泛应用!下面通过一个小小案例完成这个分页效果:

参数含义:string urlFormat: 要传给服务器端的URL地址格式,方便在点超链接时进行相应的跳转

long totalSize:     总的数据条数。

long pageSize:    每页多少条数据

long currentPage: 当前的页数

后面通过具体的一个案例来用这个分页方法:

一.分页方法:

       /// <summary>
/// 生成页码的html
/// </summary>
/// <param name="urlFormat">超链接的格式。list.ashx?pagenum={pageNum}。地址中用{pagenum}做为当前页码的占位符</param></param>
/// <param name="totalSize">总数据条数</param>
/// <param name="pageSize">每页多少条数据</param>
/// <param name="currentPage">当前页</param>
/// <returns></returns>
public static RawString Pager(string urlFormat, long totalSize,
long pageSize, long currentPage)
{
StringBuilder sb = new StringBuilder();
//总页数
long totalPageCount = (long)Math.Ceiling((totalSize * 1.0f) / (pageSize * 1.0f));
//当前页的前几页
long firstPage = Math.Max(currentPage - , );
//当前页的后几页
long lastPage = Math.Min(currentPage + , totalPageCount);
//绘制分页,首页
sb.AppendLine("<div><a href='" + urlFormat.Replace("{pageNum}", "") + "'>首页</a>");
//绘制分页中间数据部分
for (long i = firstPage; i < lastPage; i++)
{
string url = urlFormat.Replace("{pageNum}", i.ToString());
if (i == currentPage) //点击后就不显示超链接
{
sb.AppendLine("<a>" + i + "</a>");
}
else
{
sb.AppendLine("<a href='" + url + "'>" + i + "</a>");
}
}
//显示最后一页
sb.AppendLine("<a href='" + urlFormat.Replace("{pageNum}", totalPageCount.ToString()) + "'>末页</a></div>");
return new RawString(sb.ToString());
}

二.案例调用:

服务器端(test.ashx):这里为了方便看到效果,展示数据直接用的固定数据

 public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/html";
long pn = Convert.ToInt64(context.Request["pn"]);
if (pn == ) //Convert.ToInt64(null)返回的是0
{
pn = ;
}
long[] num = new long[]; //这里的数据用的是固定数据
for (int i = ; i < ; i++)
{
num[i] = ((pn-) * ) + i;
}
OutputRazor(context, "~/test.cshtml", new { nums=num,page=pn}); //这里用的Razor模板引擎
}

这里的Razor方法见:http://www.cnblogs.com/fengxuehuanlin/p/5313354.html

UI端展示(test.cshtml):

<body>
<ul>
@{
foreach (int i in Model.nums)
{
<li>@i</li>
}
}
</ul>
@Pager("test.ashx?pn={pageNum}", 1020, 50, Model.page);
</body>

效果图:

三.jQuery分页插件:

前面写的这些主要是进行功能的实现,样式效果差了点。下面贴上通过jQuery实现的分页效果

jQuery的效果图,及调用方法:

文件下载地址:http://pan.baidu.com/s/1cofez0

C#实现分页组件的更多相关文章

  1. 基于Vue.js的表格分页组件

    有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...

  2. angular-ui分页组件

    http://angular-ui.github.io/bootstrap/#/pagination 分页组件只提供生成分页按钮,数据的显示需要使用ng-repeat, 注意设置 items-per- ...

  3. asp.net mvc4+mysql做一个简单分页组件(部分视图)

    在开始做mysql分页功能组件前,便设定的是要有一定可复用性.先在项目里Views文件夹下右键新建名为_PaginationComponent.cshtml,这里html及css我采用的bootstr ...

  4. ReactJS实现的通用分页组件

    大家多少都自己写过各种版本的分页工具条吧,像纯服务版的,纯jsWeb板的,Angular版的,因为这个基础得不能再基础的功能太多地方都会用到,下面我给出以个用ReactJS实现的版本,首先上图看下效果 ...

  5. 基于vue2.0的分页组件开发

    今天安排的任务是写基于vue2.0的分页组件,好吧,我一开始是觉得超级简单的,但是越写越写不出来,写的最后乱七八糟的都不知道下句该写什么了,所以重新捋了思路,小结一下- 首先写组件需要考虑: 要从父组 ...

  6. 基于Vue封装分页组件

    使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...

  7. [js开源组件开发]ajax分页组件

    ajax分页组件 我以平均每一周出一个开源的js组件为目标行动着,虽然每个组件并不是很庞大,它只完成某一个较小部分的工作,但相信,只要有付出,总会得到回报的.这个组件主要完成分页的工作. 这张图里显示 ...

  8. javascript 分页组件

    自己写的一个简单的分页组件,主要功能还有实现都在JS中,html页面中只用增加一个放置生成分页的DIV,并给定容器的id. html结构如下: <ul class="paginatio ...

  9. 一步步编写avalon组件02:分页组件

    本章节,我们做分页组件,这是一个非常常用的组件.grid, listview都离不开它.因此其各种形态也有. 本章节教授的是一个比较纯正的形态,bootstrap风格的那种分页栏. 我们建立一个ms- ...

  10. Vue.js的表格分页组件

    转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更 ...

随机推荐

  1. linux下的5款桌面环境

    以前都用Ubuntu,没有换过桌面环境,不会换,也担心换了不会(真是有病,担心用不习惯,还不如回去用windows) ubuntu 默认的是Unity,用过一段不长的时间,恩,说不出来有什么不好的,也 ...

  2. iOS 之 导航栏按钮

    UIButton *releaseButton = [UIButton buttonWithType:UIButtonTypeRoundedRect]; [releaseButton setTitle ...

  3. 安卓版php服务器的mysql数据库增删改查简单案例

    界面: index.php文件: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  4. LVS 负载均衡解决方案 (windows IIS)

    LVS 负载均衡解决方案 因为我们的产品运行的主流平台是WINDOWS+IIS+SQLSERVER(2000以上版本),而LVS+KEEPALIVED是LINUX下的四层负载均衡软件.其有如下特点: ...

  5. MongoDB_GridFS_存储文件

    GridFS mongoDB除了保存各种文档(JOSN结构)外还能够保存文件.GridFS规范提供了一种透明机制,可以将一个大文件分割成为多个较小的文档,这样的机制允许我们有效的保存大文件对象,特别对 ...

  6. Ninja介绍

    什么是Ninja 在Unix/Linux下通常使用Makefile来控制代码的编译,但是Makefile对于比较大的项目有时候会比较慢,看看上面那副漫画,代码在编译都变成了程序员放松的借口了.所以这个 ...

  7. Flex性能调优相关的一些总结

    1.Performace包含4点:(1)Latency反应时间(2)Scalability:可伸缩性(3)Reliablity:稳定性(4)Availability:可用性2.运行时生命周期:Flex ...

  8. 照片提取GPS 转成百度地图坐标

    感谢: 小慧only http://www.cnblogs.com/zhaohuionly/p/3142623.html  GPS转化坐标方法 大胡子青松 http://www.cnblogs.com ...

  9. ML2 配置 OVS VxLAN - 每天5分钟玩转 OpenStack(146)

    今天我们开始学习 OVS 如何实现 Neutron VxLAN,关于 VxLAN 的概念以及 Linux Bridge 实现,大家可以参考前面相关章节. Open vSwitch 支持 VXLAN 和 ...

  10. Hadoop权威指南:压缩

    Hadoop权威指南:压缩 [TOC] 文件压缩的两个好处: 减少储存文件所需要的磁盘空间 加速数据在网络和磁盘上的传输 压缩格式总结: 压缩格式 工具 算法 文件扩展名 是否可切分 DEFLATE ...