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.boxy插件的iframe扩展代码
Jul 02 Javascript
js原生appendChild的bug解决心得分享
Jul 01 Javascript
js 金额格式化来回转换示例
Feb 23 Javascript
js实现按钮加背景图片常用方法
Nov 01 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
js评分组件使用详解
Jun 06 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
javascript实现滚动条效果
Mar 24 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之第九天
2006/10/09 PHP
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
CI框架安全类Security.php源码分析
2014/11/04 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
linux下为php添加iconv模块的方法
2016/02/28 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
PHP fclose函数用法总结
2019/02/15 PHP
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
js电信网通双线自动选择技巧
2008/11/18 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
一览画面点击复选框后获取多个id值的方法
2016/05/30 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
基于canvas实现手写签名(vue)
2020/05/21 Javascript
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
Python的时间模块datetime详解
2017/04/17 Python
Python使用sorted排序的方法小结
2017/07/28 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
python url 参数修改方法
2018/12/26 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
帕克纽约:PARKER NY
2018/12/09 全球购物
英国标准协会商店:BSI Shop
2019/02/25 全球购物
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
学前教育教师求职自荐信
2013/09/22 职场文书
就业推荐表自我鉴定
2014/03/21 职场文书
2015年世界艾滋病日活动总结
2015/03/24 职场文书
php中pcntl_fork详解
2021/04/01 PHP