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

参数含义: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. 为什么delphi控件前面都有t

    控件的类名都有一个T字, 它是Type的第一个字母. 比如按钮就是TButton. 但在Delphi的控件面板上的并不带T字, 比如就是Button. 如果你把它放在窗体上, 默认名字则成为Butto ...

  2. Delphi 常用API 函数

    Delphi 常用API 函数 AdjustWindowRect 给定一种窗口样式,计算获得目标客户区矩形所需的窗口大小 AnyPopup 判断屏幕上是否存在任何弹出式窗口 ArrangeIconic ...

  3. centos下修改hostname,ip,netmask,gateway,dns

    http://itlab.idcquan.com/linux/set/917191.html http://jingyan.baidu.com/article/e4d08ffdd417660fd3f6 ...

  4. Select与Epoll比较

    一.问题引出 联系区别 问题的引出,当需要读两个以上的I/O的时候,如果使用阻塞式的I/O,那么可能长时间的阻塞在一个描述符上面,另外的描述符虽然有数据但是不能读出来,这样实时性不能满足要求,大概的解 ...

  5. jQuery查询性能考虑

    http://blog.163.com/neusoft_hao@yeah/blog/static/120544724201282810510215/

  6. 使用AOP的方式监测方法执行耗时

    在一些对系统中,往往可能需要对一些核心业务做相应的监测.如:记录调用参数,返回值,方法执行耗时等等.如果直接在方法的前后加入代码,如下: public int F(int a, string s) { ...

  7. react-router 学习笔记

    前言: 本文为个人学习react-router的总结.包括路由基础配置,跳转,权限管理,组件与路由配置的关系,代码分割.欢迎交流指导. 一.路由基础 1.路由配置 & 显示路由组件的view( ...

  8. 一个案例深入Python中的__new__和__init__

    准备 在Python中,一切皆对象. 既然一切皆对象,那么类也是对象,我们暂且称之为 类对象.来个简单例子(本篇文章的所有案例都是运行在Python3.4中): class foo(): pass p ...

  9. 学习篇之String()

    // 3个特殊的引用类型:Boolean,Number,String var s1 = "some text"; ,); // me t ,); // me ,-); // so ...

  10. css3 过渡和2d变换——回顾

    1.transition 语法:transition: property duration timing-function delay; transition-property 设置过渡效果的css ...