C#实现分页组件

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

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

long totalSize:     总的数据条数。

long pageSize:    每页多少条数据

long currentPage: 当前的页数

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

一.分页方法:

 1      /// <summary>
 2         /// 生成页码的html
 3         /// </summary>
 4         /// <param name="urlFormat">超链接的格式。list.ashx?pagenum={pageNum}。地址中用{pagenum}做为当前页码的占位符</param></param>
 5         /// <param name="totalSize">总数据条数</param>
 6         /// <param name="pageSize">每页多少条数据</param>
 7         /// <param name="currentPage">当前页</param>
 8         /// <returns></returns>
 9         public static RawString Pager(string urlFormat, long totalSize,
10             long pageSize, long currentPage)
11         {
12             StringBuilder sb = new StringBuilder();
13             //总页数
14             long totalPageCount = (long)Math.Ceiling((totalSize * 1.0f) / (pageSize * 1.0f));
15             //当前页的前几页
16             long firstPage = Math.Max(currentPage - 5, 1);
17             //当前页的后几页
18             long lastPage = Math.Min(currentPage + 6, totalPageCount);
19             //绘制分页,首页
20             sb.AppendLine("<div><a href=‘" + urlFormat.Replace("{pageNum}", "1") + "‘>首页</a>");
21             //绘制分页中间数据部分
22             for (long i = firstPage; i < lastPage; i++)
23             {
24                 string url = urlFormat.Replace("{pageNum}", i.ToString());
25                 if (i == currentPage)  //点击后就不显示超链接
26                 {
27                     sb.AppendLine("<a>" + i + "</a>");
28                 }
29                 else
30                 {
31                     sb.AppendLine("<a href=‘" + url + "‘>" + i + "</a>");
32                 }
33             }
34             //显示最后一页
35             sb.AppendLine("<a href=‘" + urlFormat.Replace("{pageNum}", totalPageCount.ToString()) + "‘>末页</a></div>");
36             return new RawString(sb.ToString());
37         }

二.案例调用:

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

 public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/html";
            long pn = Convert.ToInt64(context.Request["pn"]);
            if (pn == 0)  //Convert.ToInt64(null)返回的是0
            {
                pn = 1;
            }
            long[] num = new long[50];  //这里的数据用的是固定数据
            for (int i = 0; i < 50; i++)
            {
                num[i] = ((pn-1) * 50) + 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

时间: 2024-10-28 16:25:33

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

第二百零九节,jQuery EasyUI,Pagination(分页)组件

jQuery EasyUI,Pagination(分页)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Pagination(分页)组件的使用方法,这个组件依赖于 LinkButton(按钮)组件.

JS表格分页组件:fupage的设计思路和具体用法(未来考虑开源,争取在2015年)

一.背景         之前在秒针工作的时候,某js高级工程师写了很多自己的组件,其中一套是分页组件,叫做st-grid.不过在我看来,bug太多,我经常给他反馈bug,我也不清楚为啥别人没有发现.    回到武汉工作后,我自己利用业余实践完善自己的官网,从前端到后端,都是自己一个人亲自搞定.    第1个分页的需求是,文章下方的评论,异步加载.第2个需求是,表格管理,比如后台管理系统,经常需要列出user.log等表的记录.   二.实例 <table class="table tab

电子商务系统的设计与实现(十):DWZ框架与第三方分页组件整合

晚上,就是刚刚,在后端管理系统中使用DWZ框架. 先是,直接使用官网网站的Demo,dwz-jui,与编程语言无关的纯静态的那个原始项目. 很快就搭建好了左侧菜单,打开菜单后,出现Tab页面,然后显示目标页面的内容. 然后,就去关注表格分页部分. DWZ自带的分页组件,感觉太麻烦了,一方面分页分成了4个部分显示,主要包括:pagerForm,查询条件pagerHeader,分页表格的头部pagerContent,分页表格的正文panleBar,分页条数栏目. 另一方面,分页html和JS中,需要

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

BootPage组件简介 其实也不是啥高大上的组件了,相反确实一个简单的表格分页组件而已,主要是自己最近项目中需要一个表格分页组件,而Vue官方组件库里分页组件都功能太强大或者没有适合我的,所以就自己写了一个凑合着用,或许有人和我一样需要这样一个简单的分页组件来实现简单的分页功能,我便在这里分享一下,大家自觉填坑咯. 如需高大上的组件,可以移步Vue官方组件库:https://github.com/vuejs/awesome-vue#libraries--plugins BootPage是一款支

javascript 分页组件

原文:javascript 分页组件 自己写的一个简单的分页组件,主要功能还有实现都在JS中,html页面中只用增加一个放置生成分页的DIV,并给定容器的id. html结构如下: <ul class="pagination" id="pageDIV"> </ul> class="pagination" 给定了分页的样式, id="pageDIV"用于放置JS生成的分页 CSS结构如下: .pagina

Fit项目分页组件的编写

项目中涉及列表显示的地方都会用到分页控件,为了能更好地与当前网站的样式匹配,这次要自己实现一个. 所以选择了模板中提供的分页样式,基于模板改造以能够动态生成: 一 控件的行为规则 a) 可设置显示几个页码(默认5个,只能是奇数) 如果当前页显示5个,则默认前后各有两个,比如当前页是5,显示页码为"3 4 5 6 7 如果当前页在最前面,比如为1,显示页码为:1 2 3 4 5 同样当前页在最后面,比如为9,显示页码为:5 6 7 8 9 如果总页数少于5,比如只有3页,则页码全部显示:1 2 3

电子商务系统的设计与实现(十三):分页组件,从前到后,从JS到Java

一.概述   学习实践Web开发5年多了,直到今天,我才算真正实现了最基本最常用的分页组件. 包括:    a.前端JS异步加载并渲染:    b.前端JSP.Freemarker.Struts标签渲染:    c.后端分页       自己写具体的分页算法和逻辑.       使用Mybatis分页插件. 今天,重点介绍下前端JS异步分页,简短介绍下后端Java提供数据.  二. 关键数据结构 public class PageVo { /** 总记录数 */ protected Intege

Mvc分页组件MvcSimplePager代码重构

1 Mvc分页组件MvcSimplePager代码重构 1.1 Intro 1.2 MvcSimplePager 代码优化 1.3 MvcSimplePager 使用 1.4 End Mvc分页组件MvcSimplePager代码重构 Intro MvcSimplePager 是为解决分页的而做的一个通用.扩展性良好的轻量级分页扩展,可以自定义分页时调用的方法,自定义分页所用的样式,样式与代码分离,维护方便. 网上有许多分页都是查询所有数据再从中查询某一页的数据,但是个人感觉数据很少时还可以,如

基于Vue封装分页组件

使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} .page-bar { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-sel

JQuery 常用积累(二)Pagination 分页组件

官方Demo网址:http://mricle.com/JqueryPagination 分页组件几乎是一般网站都会涉及到的组件,网上有很多这样的插件,自己挑来跳去选择了这一款,功能强大,可扩展性比较强,而且幕后的工程师一直在完善这个插件,不废话了,上干货. (模拟场景:商店网站,俺要根据用户选择的查询条件,来查询数据库,并展示到前台) 1.JSP页面: 如果你的web项目前台是基于bootstrap,js只需要引入2个js: <r:script path="/style/js/Jquery