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 相关文章推荐
使两个iframe的高度与内容自适应,且相等
Nov 20 Javascript
javascript IE中的DOM ready应用技巧
Jul 23 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
使用jquery解析XML示例代码
Sep 05 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
js鼠标移动时禁止选中文字
Feb 19 Javascript
详解AngularJS ng-class样式切换
Jun 27 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 Javascript
selenium+java中用js来完成日期的修改
Oct 31 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模板技术原理【一】
2008/01/10 PHP
PHP 程序员也要学会使用“异常”
2009/06/16 PHP
php实现的替换敏感字符串类实例
2014/09/22 PHP
PHP实现的简单日历类
2014/11/29 PHP
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
webpack配置之后端渲染详解
2017/10/26 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
2017/11/27 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
JavaScript的查询机制LHS和RHS解析
2019/08/16 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
js实现简单的倒计时
2021/01/28 Javascript
编写多线程Python服务器 最适合基础
2018/09/14 Python
python向字符串中添加元素的实例方法
2019/06/28 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
pytorch 改变tensor尺寸的实现
2020/01/03 Python
python3.6中anaconda安装sklearn踩坑实录
2020/07/28 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
DC Shoes澳大利亚官方网上商店:购买DC鞋子
2019/10/25 全球购物
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
Oracle的内存结构(Memory structures)
2015/06/10 面试题
在校学生职业规划范文
2014/01/08 职场文书
普宁寺导游词
2015/02/04 职场文书
收入证明申请书
2015/06/12 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
学生会部长竞选稿
2015/11/19 职场文书