自己写的一个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了项目又刚好需要一个分页的功能.于是百度发现几篇文章介绍的实在方式有点复杂, 没耐心看自己动手造轮子写了 ...
随机推荐
- [Asp.net 5] Caching-缓存架构与源码分析
首先奉献caching的开源地址[微软源码] 1.工程架构 为了提高程序效率,我们经常将一些不频繁修改,但是使用了还很大的数据进行缓存.尤其是互联网产品,缓存可以说是提升效率优化第一利器.微软为我们实 ...
- ThreadPool.QueueUserWorkItem的用法
代码: ThreadPool.SetMaxThreads(, ); ThreadPool.QueueUserWorkItem((obj) => { MessageBox.Show("执 ...
- Android 5.0源码编译问题
如果是自己通过repo和git直接从google官网上download的源码,请忽略这个问题,但是由于google在国内被限制登录,通过这一种方法不是每个人都能download下来源码,通常的做法就是 ...
- 随便记录下系列 - node->express
随便记录下系列 - node->express 文章用啥写?VsCode. 代码用啥写?VsCode. 编辑器下载:VsCode 一.windows下安装node.js环境: 下载地址 相比以前 ...
- ThinkPHP 整合Bootstrap Ajax分页
ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $wh ...
- 纯css3 3D图片立方体旋转动画特效
纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...
- kmdjs和循环依赖
循环依赖 循环依赖是非常必要的,有的程序写着写着就循环依赖了,可以提取出一个对象来共同依赖解决循环依赖,但是有时会破坏程序的逻辑自封闭和高内聚.所以没解决好循环依赖的模块化库.框架.编译器都不是一个好 ...
- Using View and Data API with Meteor
By Daniel Du I have been studying Meteor these days, and find that Meteor is really a mind-blowing f ...
- 用block做事件回调来简化代码，提高开发效率
我们在自定义view的时候,通常要考虑view的封装复用,所以如何把view的事件回调给Controller就是个需要好好考虑的问题, 一般来说,可选的方式主要有target-action和de ...
- 从无到有实现登录功能以及thinkphp怎么配置数据库信息
好开心,终于解决了.从学习android到现在写登录功能已经不是一次两次了,如今再写想着肯定是信手拈来,没有想到的是尽然折磨了我一天的时间才搞定它.唉...... 先来看几张截图,这次的登录跟以往的不 ...