MvcPager分页控件 适用于Bootstrap


Posted in Javascript onJune 03, 2017

软件开发分页效果必不可少,对于Asp.Net MVC 而言,MvcPager 是个不错的选择。

请访问http://www.webdiyer.com/mvcpager/

由于自带的分页样式不能和项目整体风格兼容,所以我们准备改写源代码,使其能够使用Bootstrap 的分页样式。

先来查看两种分页的html代码

Bootstrap 样式:

<ul class="pagination">
 <li class="disabled"><a href="#">«</a></li>
 <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
 ...
 </ul>

一个ul标签,li 下面有一个a 标签.

MvcPager 样式:

<!--MvcPager v2.0 for ASP.NET MVC 4.0+ © 2009-2013 Webdiyer (http://www.webdiyer.com)-->
<div data-maxpages="5" data-mvcpager="true" data-pageparameter="id" data-urlformat="/mvcpager/demo/basic/__id__/"><a disabled="disabled">首页</a>  <a disabled="disabled">上一页</a>  1  <a href="/mvcpager/demo/basic/2/">2</a>  <a href="/mvcpager/demo/basic/3/">3</a>  <a href="/mvcpager/demo/basic/4/">4</a>  <a href="/mvcpager/demo/basic/5/">5</a>  <a href="/mvcpager/demo/basic/2/">下一页</a>  <a href="/mvcpager/demo/basic/5/">尾页</a>  <select data-pageindexbox="true" data-autosubmit="true"><option value="1" selected="selected">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div>
<!--MvcPager v2.0 for ASP.NET MVC 4.0+ © 2009-2013 Webdiyer (http://www.webdiyer.com)-->

这里就比较简单了,一个div 下只有a 标签.

 那么问题来了,我们该怎么修改源码来达到Bootstrap 分页效果呢?

1、到官网下载MvcPager 源代码

2、开始研究html 生成规则.

 这两步笔者已经帮你做了,下面跟我一起来做修改.

  通过代码调试跟踪和查看源码注释,我们知道了最终的HTML 呈现是在PagerBuilder.cs 下的RenderPager() 方法.

var sb = new StringBuilder();
  if (_ajaxPagingEnabled)
  {
  foreach (PagerItem item in pagerItems)
  {
   //修改前
   //sb.Append( GenerateAjaxPagerElement(item) );
   //修改后
   sb.Append("<li>" + GenerateAjaxPagerElement(item) + "</li>");
  }
  }
  else
  {
  foreach (PagerItem item in pagerItems)
  {
   //修改前
   //sb.Append( GeneratePagerElement(item) );
   //修改后
   sb.Append("<li>" + GeneratePagerElement(item) + "</li>");
  }
  }

  修改以上代码以获得li标签。由于ul标签是最后加上去的所以我们在这里修改:

if (_pagerOptions.ShowPageIndexBox)
  {
  if (!_ajaxPagingEnabled)
  {
   var attrs = new Dictionary<string, object>();
   AddDataAttributes(attrs);
   tb.MergeAttributes(attrs, true);
  }
  sb.Append(BuildGoToPageSection());
  }
  else
  sb.Length -= _pagerOptions.PagerItemsSeperator.Length;
  //修改前
  // tb.InnerHtml = sb.ToString() ;
  //修改后,为ul加上class='pagination'以获得boostrap 分页样式
  tb.InnerHtml = "<ul class='pagination'>" + sb.ToString() + "</ul>";

    有了以上还不行,还需要为当前页增加样式,

    修改后的GenerateAjaxAnchor(PagerItem item) 方法为:

private string GenerateAjaxAnchor(PagerItem item)
 {
  string url = GenerateUrl(item.PageIndex);
  if (string.IsNullOrWhiteSpace(url))
   //这里直接假的行内样式,可以使用class替换掉
  return "<a style='z-index:2;color:#fff; cursor: default; border-color: #428bca;' disabled='disabled'>" + item.Text + "</a>";
  //return HttpUtility.HtmlEncode(item.Text);
  var tag = new TagBuilder("a") { InnerHtml = item.Text };
  tag.MergeAttribute("href", url);
  tag.MergeAttribute("data-pageindex", item.PageIndex.ToString(CultureInfo.InvariantCulture));
  //修改后,添加了li标签
  return "<li>" + tag.ToString(TagRenderMode.Normal) + "</li>";
 }

 对源代码的修改就是这么多了,我们一起看看效果.

  中文版效果:

MvcPager分页控件 适用于Bootstrap

英文版效果(同样是修改源码,增加了对英文的支持):

MvcPager分页控件 适用于Bootstrap

源码下载:MvcPager分页控件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
Mar 19 Javascript
创建你的第一个AngularJS应用的方法
Jun 16 Javascript
javascript对象的相关操作小结
May 16 Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 Javascript
使用ES6语法重构React代码详解
May 09 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
Jul 27 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
Apr 05 Javascript
vue导航栏部分的动态渲染实例
Nov 01 Javascript
webpack的 rquire.context用法实现工程自动化的方法
Feb 07 Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 #Javascript
vue 中自定义指令改变data中的值
Jun 02 #Javascript
Jquery EasyUI $.Parser
Jun 02 #jQuery
BootStrap 动态表单效果
Jun 02 #Javascript
socket.io与pm2(cluster)集群搭配的解决方案
Jun 02 #Javascript
angularjs定时任务的设置与清除示例
Jun 02 #Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 #Javascript
You might like
Php Cookie的一个使用注意点
2008/11/08 PHP
单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)
2012/07/31 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
网页中的图片的处理方法与代码
2009/11/26 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
微信小程序 弹幕功能简单实例
2017/02/14 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
python各种语言间时间的转化实现代码
2016/03/23 Python
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
Python Charles抓包配置实现流程图解
2020/09/29 Python
Python 多进程原理及实现
2020/12/21 Python
美国网上眼镜供应商:LEOTONY(眼镜、RX太阳镜和太阳镜)
2017/10/31 全球购物
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
社区七一党员活动方案
2014/01/25 职场文书
年终总结会议主持词
2014/03/17 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
男生贾里读书笔记
2015/06/30 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
初一语文教学反思
2016/03/03 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
Java中try catch处理异常示例
2021/12/06 Java/Android
关于Redis的主从复制及哨兵问题
2022/06/16 Redis