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 相关文章推荐
jQuery使用手册之一
Mar 24 Javascript
js数组方法扩展实现数组统计函数
Apr 09 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
jQuery中:image选择器用法实例
Jan 03 Javascript
Jquery 实现grid绑定模板
Jan 28 Javascript
jQuery遍历节点树方法分析
Sep 08 Javascript
js设置和获取自定义属性的方法
Oct 20 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
Apr 10 Javascript
vue 挂载路由到头部导航的方法
Nov 13 Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
Jul 24 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 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
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
PHP实现微信提现功能
2018/09/30 PHP
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
javascript fullscreen全屏实现代码
2009/04/09 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
js实现图片轮播效果学习笔记
2017/07/26 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
Python学习资料
2007/02/08 Python
python中循环语句while用法实例
2015/05/16 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
python里运用私有属性和方法总结
2019/07/08 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
浅谈Python中的继承
2020/06/19 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
linux系统都有哪些运行级别
2016/03/26 面试题
品质主管岗位职责
2014/03/16 职场文书
反对邪教标语
2014/06/30 职场文书
2014年城管个人工作总结
2014/12/08 职场文书