自己写的一个Pager分页组件,WebForm，Mvc都适用
我一说写这个功能的时候，好多人估计有疑问。分页功能网上多的是，搜一个不就行了，你这样不是浪费时间么。你说这句话的时候，我是比较信的，首先自己写一些东西是很耗时，有这些时间又能多打几盘LOL了。但是我觉得有些东西需要你自己写了之后思路才清晰，一直认为知道一些原理才是最重要的，并且能让你更深入的去了解一门语言。就像好多人说“我精通JQuery框架”，那我想问你“有没有看过Jquery源码，知不知道它的实现原理和机制？”。熟练和精通不是同一个层次，首先熟练是你会使用一些框架的语法和用法，精通是指你知道其中的原理和机制，并且能够模仿并延伸一些知识。我说这话的意思是让大家带着一股钻研精神去学习一门语言，当做一种兴趣和爱好，而不仅仅是把它当做一个饭碗，混混日子那么简单。
说到这个功能，我不得不提一下一个叫杨涛的大叔，一个善于与别人分享资源的人,你可以称他为“分页达人”，写了各种分页的扩展，他的个人主页地址http://www.webdiyer.com/，大家没事可以看看，想必也有好多人用过他写的分页控件。
下面来说说正题，这个功能其实是我两年前写的，今天无意间看到，所以只是想和大家分享一下，另外也算是做个笔记，说下我的思路。
分页控件其实就是根据链接在页面间传递参数，因为我看到MVC中你可以看到这样传递参数的new {para=val}这种方式传递参数，于是我想到用可以模仿这种传递参数的方式，那就用dynamic来作为参数对象传递。
下面是附上我写的具体的实现的代码
数据处理代码：
1.定义IPagedList接口
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks; namespace Infrastruction.Pager
{
public interface IPagedList
{
int pageIndex { get; set; }
int pageSize { get; set; }
int totalItemCount { get; set; }
int totalPageCount { get; }
}
}
2.实现IPagedList接口
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web; namespace Infrastruction.Pager
{
public class PagedList<T> : List<T>, IPagedList
{
public int pageIndex
{
get;
set;
} public int pageSize
{
get;
set;
} public int totalItemCount
{
get;
set;
} public int totalPageCount
{
get
{
return totalItemCount % pageSize == ? (totalItemCount / pageSize) : (totalItemCount / pageSize + );
}
} public PagedList(IEnumerable<T> sources, int pageIndex, int pageSize)
{
if (sources != null && sources.Any())
{
this.AddRange(sources.Skip(pageSize * (pageIndex - )).Take(pageSize).ToList());
}
this.pageIndex = pageIndex;
this.pageSize = pageSize;
this.totalItemCount = sources.Count();
}
}
}
分页标签处理代码：
3.PagerHelper
using Infrastruction.Pager;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection;
using System.Text;
using System.Web;
using System.Web.UI; namespace System.Web.UI
{
public static class PagerHelper
{ public static string Pager(string url, IPagedList pagedList)
{
StringBuilder builder = new StringBuilder();
if (pagedList != null)
{
builder.Append("<script type='text/javascript'>");
builder.Append("window.onload = function () {");
builder.Append(" var elements = document.getElementById('pager').childNodes;");
builder.Append(" for (var i = 0; i < elements.length; i++) {");
builder.Append("var txt = elements[i].innerText || elements[i].textContent;");
builder.Append(" if (elements[i].nodeType =='1' && txt == '" + pagedList.pageIndex + "') {");
builder.Append("elements[i].style.textDecoration = 'underline';break; } } }");
builder.Append("</script>");
builder.Append("<div id='pager'>"); builder.Append("<span class='p'>");
builder.AppendFormat("共 {0} 条数据 页次：{1}/{2}", pagedList.totalItemCount, pagedList.pageIndex, pagedList.totalPageCount, "上一页");
builder.Append("</span>");
builder.Append(" ");
builder.Append(" ");
builder.Append(" ");
builder.Append(" ");
if (pagedList.pageIndex > && pagedList.pageIndex <= pagedList.totalPageCount)
{
builder.Append("<span class='p'>");
builder.AppendFormat("<a href='{0}?pageIndex={1}'>{2}</a>", url, , "首页");
builder.Append("</span>");
builder.Append(" ");
builder.Append("<span class='p'>");
builder.AppendFormat("<a href='{0}?pageIndex={1}'>{2}</a>", url, pagedList.pageIndex - , "上一页");
builder.Append("</span>");
builder.Append(" ");
}
if (pagedList.totalPageCount > && pagedList.totalPageCount <= )
{
for (int i = ; i <= pagedList.totalPageCount; i++)
{
builder.Append("<span class='p'>");
builder.AppendFormat("<a href='{0}?pageIndex={1}'>{2}</a>", url, i, i);
builder.Append("</span>");
builder.Append(" ");
}
}
else if (pagedList.totalPageCount > )
{
if (pagedList.pageIndex < )
{
for (int i = ; i <= ; i++)
{
builder.Append("<span class='p'>");
builder.AppendFormat("<a href='{0}?pageIndex={1}'>{2}</a>", url, i, i);
builder.Append("</span>");
builder.Append(" ");
}
builder.Append("<span class='p'>");
builder.AppendFormat("<a href='{0}?pageIndex={1}'>{2}</a>", url, , "...");
builder.Append("</span>");
builder.Append(" ");
}
else
{
builder.Append("<span class='p'>");
builder.AppendFormat("<a href='{0}?pageIndex={1}'>{2}</a>", url, (pagedList.pageIndex - ), "...");
builder.Append("</span>");
builder.Append(" ");
if (pagedList.pageIndex >= && pagedList.totalPageCount <= pagedList.pageIndex + )
{
for (int i = pagedList.pageIndex - ; i <= pagedList.totalPageCount; i++)
{
builder.Append("<span class='p'>");
builder.AppendFormat("<a href='{0}?pageIndex={1}'>{2}</a>", url, i, i);
builder.Append("</span>");
builder.Append(" ");
}
}
else
{
for (int i = pagedList.pageIndex - ; i <= pagedList.pageIndex + ; i++)
{
builder.Append("<span class='p'>");
builder.AppendFormat("<a href='{0}?pageIndex={1}'>{2}</a>", url, i, i);
builder.Append("</span>");
builder.Append(" ");
}
builder.Append("<span class='p'>");
builder.AppendFormat("<a href='{0}?pageIndex={1}'>{2}</a>", url, (pagedList.pageIndex + ), "...");
builder.Append("</span>");
builder.Append(" ");
}
} }
if (pagedList.pageIndex >= && pagedList.pageIndex < pagedList.totalPageCount)
{
builder.Append("<span class='p'>");
builder.AppendFormat("<a href='{0}?pageIndex={1}'>{2}</a>", url, pagedList.pageIndex + , "下一页");
builder.Append("</span>");
builder.Append(" ");
builder.Append("<span class='p'>");
builder.AppendFormat("<a href='{0}?pageIndex={1}'>{2}</a>", url, pagedList.totalPageCount, "尾页");
builder.Append("</span>");
builder.Append(" ");
}
builder.Append("</div>");
}
return builder.ToString();
} public static string Pager(string url, IPagedList pagedList, dynamic objAttr)
{
StringBuilder builder = new StringBuilder();
if (pagedList != null)
{
builder.Append("<script type='text/javascript'>");
builder.Append("window.onload = function () {");
builder.Append(" var elements = document.getElementById('pager').childNodes;");
builder.Append(" for (var i = 0; i < elements.length; i++) {");
builder.Append("var txt = elements[i].innerText || elements[i].textContent;");
builder.Append(" if (elements[i].nodeType =='1' && txt == '" + pagedList.pageIndex + "') {");
builder.Append("elements[i].style.textDecoration = 'underline';break; } } }");
builder.Append("</script>");
string paras = "";
PropertyInfo[] infos = objAttr.GetType().GetProperties();
if (infos != null && infos.Any())
{
foreach (var item in infos)
{
paras += string.Format("{0}={1}", item.Name, item.GetValue(objAttr, null));
paras += "&";
}
}
paras = paras + "pageIndex=";
builder.Append("<div id='pager'>"); builder.Append("<span class='p'>");
builder.AppendFormat("共 {0} 条数据 页次：{1}/{2}", pagedList.totalItemCount, pagedList.pageIndex, pagedList.totalPageCount, "上一页");
builder.Append("</span>");
builder.Append(" ");
builder.Append(" ");
builder.Append(" ");
builder.Append(" "); if (pagedList.pageIndex > && pagedList.pageIndex <= pagedList.totalPageCount)
{
builder.Append("<span class='p'>");
builder.AppendFormat("<a href='{0}?{1}'>{2}</a>", url, paras + , "首页");
builder.Append("</span>");
builder.Append(" ");
builder.Append("<span class='p'>");
builder.AppendFormat("<a href='{0}?{1}'>{2}</a>", url, paras + (pagedList.pageIndex - ), "上一页");
builder.Append("</span>");
builder.Append(" ");
}
if (pagedList.totalPageCount > && pagedList.totalPageCount <= )
{
for (int i = ; i <= pagedList.totalPageCount; i++)
{
builder.Append("<span class='p'>");
builder.AppendFormat("<a href='{0}?{1}'>{2}</a>", url, paras + i, i);
builder.Append("</span>");
builder.Append(" ");
}
}
else if (pagedList.totalPageCount > )
{
if (pagedList.pageIndex < )
{
for (int i = ; i <= ; i++)
{
builder.Append("<span class='p'>");
builder.AppendFormat("<a href='{0}?{1}'>{2}</a>", url, paras + i, i);
builder.Append("</span>");
builder.Append(" ");
}
builder.Append("<span class='p'>");
builder.AppendFormat("<a href='{0}?{1}'>{2}</a>", url, paras + , "...");
builder.Append("</span>");
builder.Append(" ");
}
else
{
builder.Append("<span class='p'>");
builder.AppendFormat("<a href='{0}?{1}'>{2}</a>", url, paras + (pagedList.pageIndex - ), "...");
builder.Append("</span>");
builder.Append(" ");
if (pagedList.pageIndex >= && pagedList.totalPageCount <= pagedList.pageIndex + )
{
for (int i = pagedList.pageIndex - ; i <= pagedList.totalPageCount; i++)
{
builder.Append("<span class='p'>");
builder.AppendFormat("<a href='{0}?{1}'>{2}</a>", url, paras + i, i);
builder.Append("</span>");
builder.Append(" ");
}
}
else
{
for (int i = pagedList.pageIndex - ; i <= pagedList.pageIndex + ; i++)
{
builder.Append("<span class='p'>");
builder.AppendFormat("<a href='{0}?{1}'>{2}</a>", url, paras + i, i);
builder.Append("</span>");
builder.Append(" ");
}
builder.Append("<span class='p'>");
builder.AppendFormat("<a href='{0}?{1}'>{2}</a>", url, paras + (pagedList.pageIndex + ), "...");
builder.Append("</span>");
builder.Append(" ");
} } }
if (pagedList.pageIndex >= && pagedList.pageIndex < pagedList.totalPageCount)
{
builder.Append("<span class='p'>");
builder.AppendFormat("<a href='{0}?{1}'>{2}</a>", url, paras + (pagedList.pageIndex + ), "下一页");
builder.Append("</span>");
builder.Append(" ");
builder.Append("<span class='p'>");
builder.AppendFormat("<a href='{0}?{1}'>{2}</a>", url, paras + pagedList.totalPageCount, "尾页");
builder.Append("</span>");
builder.Append(" ");
}
builder.Append("</div>");
}
return builder.ToString();
} }
}
4. PagerLinqExtension（ 基于linq的扩展）
using System;
using System.Collections.Generic;
using System.Linq;
using System.Linq.Expressions;
using System.Web; namespace Infrastruction.Pager
{
public static class PagerLinqExtension
{ public static PagedList<T> ToPagedList<T>(this IQueryable<T> source, int pageIndex, int pageSize)
{
return new PagedList<T>(source, pageIndex, pageSize);
} }
}
调用方法
1.Webform调用: <%=PagerHelper.Pager("Products.aspx", pageList, new { cid=Cid})%> 或者用literal在后台绑定也行
2.Mvc调用:
需要扩展一下方法
namespace System.Web.Mvc.Html
{
public static class HtmlExtension
{
public static IHtmlString Pager(this HtmlHelper helper, string url, IPagedList pagedList)
{
return helper.Raw(PagerHelper.Pager(url, pagedList));
}
public static IHtmlString Pager(this HtmlHelper helper, string url, IPagedList pagedList, dynamic objAttr)
{
return helper.Raw(PagerHelper.Pager(url, pagedList, objAttr));
}
}
}
然后页面调用@Html.Pager("Products.aspx", pageList, new { cid=Cid,......})
全部的代码都在上面，大家想看的可以看看，有不同想法的也可以和我交流下，左上角有qq。
自己写的一个Pager分页组件,WebForm，Mvc都适用的更多相关文章
- asp.net mvc4+mysql做一个简单分页组件（部分视图）
在开始做mysql分页功能组件前,便设定的是要有一定可复用性.先在项目里Views文件夹下右键新建名为_PaginationComponent.cshtml,这里html及css我采用的bootstr ...
- React自己写的一个地图小组件
由于今天比较闲,就玩了玩react,然后就封装了一个地图的组件,当然功能比较简单,因为就是随手写的小东西,但是由于引用了百度API和bee-mobile,所以用起来可能要薛微麻烦一点点,但是我保证,只 ...
- 自己写的一个jQuery分页插件
;(function($){ $.fn.extend({ pageList: function (json) { function PageList() { this.initHtml = " ...
- 用vue的自定义组件写了一个拖拽 组件,局部的 只能在自定义元素内的
简单实现 没有做兼容<!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...
- Vue.js的表格分页组件
转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更 ...
- java+springBoot+Thymeleaf+vue分页组件的定义
导读 本篇着重介绍java开发环境下,如何写一个vue分页组件,使用到的技术点有java.springBoot.Thymeleaf等: 分页效果图 名称为vuepagerbasic的分页组件,只包含上 ...
- 这两天自己模仿写的一个Asp.Net的显示分页方法 附加实体转换和存储过程
之前自己一直用Aspnetpager控件来显示项目中的分页,但是每次都要拖一个aspnetpager的控件进去,感觉很不舒服,因为现在自己写的webform都不用服务器控件了,所以自己仿照aspnet ...
- 基于vue2.0的一个分页组件
分页组件在项目中经常要用到之前一直都是在网上找些jq的控件来用(逃..),最近几个项目用上vue了项目又刚好需要一个分页的功能.于是百度发现几篇文章介绍的实在方式有点复杂, 没耐心看自己动手造轮子写了 ...
随机推荐
- 《HelloGitHub月刊》第06期
前言 <HelloGitHub>月刊做到第06期了(已经做了6个月了),在GitHub上获得了100+的stars,虽然不多,但是我很知足了,说明有人觉得这个项目是有价值的.同时园子中的' ...
- IDEA上安装和使用checkstyle,findbugs,visualVM,PMD插件
##安装插件步骤: 1.打开settings 2.选择plugins 3.点击"Browse repositories" 4.搜索对应内插件,点击"install&quo ...
- MVC采用Jquery实现局部刷新
该文纯粹属于个人学习,有不足之处请多多指教! 效果图: 单击Detail下面出现详细,效果如下: 为了使操作时两个不同的数据源相互干扰,使用局部视图刷新,代码如下: 首先介绍主页Index代码: @m ...
- asp.net实现图片在线上传并在线裁剪
1.说明 接上一篇文章uploadify实现多附件上传完成后,又突然用到头像上传并在线裁剪.在网上找个众多例子都没有符合要求的,有一篇文章写的不错,就是文旺老兄写的这篇Asp.Net平台下的图片在线裁 ...
- 自己动手写计算器v1.1
这个改动主要是使用工厂模式替代了简单工厂模式,这样做的好处是如果以后我们要扩充其他运算时,就不用总是去修改工厂类, 这是可以采取工厂模式,主要是将原来简单工厂类的逻辑判断分离出来,将它作为一个借口,与 ...
- 来玩Play框架02 响应
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 我上一章总结了Play框架的基本使用.这一章里,我将修改和增加响应. HTTP协议 ...
- node.js express安装及示例网站搭建
1.首先肯定是要安装Node.JS windows cmd依次输入如下命令: cd C:\Program Files\nodejs\ npm install -g expressnpm install ...
- iOS：frame访问、设置简化
看到一些程序都有这种写法,也不知道原创者是谁了.先在博客保存下. 在.m文件 #import "UIView+MyFrameCategory.h" @implementation ...
- (十)Maven依赖详解
1.何为依赖? 比如你是个男的,你要生孩子,呸呸呸...男的怎么生孩子,所以你得依赖你老婆,不过也不一定咯,你也可以依赖其她妹子. 我们在平时的项目开发中也是同理,你需要依赖一些东西才能实现相应的功能 ...
- 慎用 supportedRuntime
运行环境:win7, net4.5 现象: 无法连接SQL2012数据库,提示连接超时 原因: 真正的原因: 找微软去 解决的办法: 去除多余的supportedRuntime,或者修 ...