自己写的一个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了项目又刚好需要一个分页的功能.于是百度发现几篇文章介绍的实在方式有点复杂, 没耐心看自己动手造轮子写了 ...
随机推荐
- 前端开发：面向对象与javascript中的面向对象实现（一）
前端开发:面向对象与javascript中的面向对象实现(一) 前言: 人生在世,这找不到对象是万万不行的.咱们生活中,找不到对象要挨骂,代码里也一样.朋友问我说:“嘿,在干嘛呢......”,我:“ ...
- Atitit.ide技术原理与实践attilax总结
Atitit.ide技术原理与实践attilax总结 1.1. 语法着色1 1.2. 智能提示1 1.3. 类成员outline..func list1 1.4. 类型推导(type inferenc ...
- hadoop 2.7.2 + zookeeper 高可用集群部署
一．环境说明 虚拟机:vmware 11 操作系统:Ubuntu 16.04 Hadoop版本:2.7.2 Zookeeper版本:3.4.9 二．节点部署说明 三．Hosts增加配置 sudo ge ...
- 新手入门Underscore.js 中文（template）
Underscore.js是一个很精干的库,压缩后只有4KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了javaScript的编程.MVC框架Backbone.js就将这个库作为自 ...
- canvas学习之API整理笔记（二）
前面我整理过一篇文章canvas学习之API整理笔记(一),从这篇文章我们已经可以基本了解到常用绘图的API.简单的变换和动画.而本篇文章的主要内容包括高级动画.像素操作.性能优化等知识点,讲解每个知 ...
- BPM实例分享——金额规则大写
金额规则大写 在涉及金额的流程中经常会遇到需要大写金额数据与小写金额匹配,如何实现输入数字后自动转换呢? 初级用法: 1.在默认表单基本属性javascript 中增加如下金额转换方法 /** 数字金 ...
- 记一次git amend事故处理方案
一.问题回顾 问题是git commit --amend 引起的. 一条commit已经push到远端develop了,但是后来又在这条commit上进行了amend操作,导致这条commit的哈希码 ...
- 【代码笔记】iOS-字符串的分割
一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. ...
- css揭秘--笔记（未完）
第0章 关于本书 1, 本书要用到一个工具函数————$$(),它可以让我们更容易获取和遍历所有匹配特定css选择符的dom元素: function $$(selector,context){ con ...
- Curator框架的使用
Curator框架的目的是减少用户的复杂度,毕竟原生的Zookeeper难以使用. 这里举一个使用例子. 第一步:建立连接 // 以下代码与192.168.1.101:2181建立了连接Curator ...