MvcPager分页控件 适用于Bootstrap

 更新时间:2017年06月03日 09:22:27   作者:HackerVirus  
这篇文章主要为大家详细介绍了MvcPager分页控件,修改后适用于Bootstrap,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

软件开发分页效果必不可少,对于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>&nbsp;&nbsp;<a disabled="disabled">上一页</a>&nbsp;&nbsp;1&nbsp;&nbsp;<a href="/mvcpager/demo/basic/2/">2</a>&nbsp;&nbsp;<a href="/mvcpager/demo/basic/3/">3</a>&nbsp;&nbsp;<a href="/mvcpager/demo/basic/4/">4</a>&nbsp;&nbsp;<a href="/mvcpager/demo/basic/5/">5</a>&nbsp;&nbsp;<a href="/mvcpager/demo/basic/2/">下一页</a>&nbsp;&nbsp;<a href="/mvcpager/demo/basic/5/">尾页</a>&nbsp;&nbsp;<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分页控件

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

相关文章

  • JS利用循环解决的一些常见问题总结

    JS利用循环解决的一些常见问题总结

    循环输出问题是面试中经典的题目,一般会给出代码,让我们解释原因,并给出若干解决方案,下面这篇文章主要给大家介绍了关于JS利用循环解决的一些常见问题,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • 教你30秒发布一个TypeScript包到NPM的方法步骤

    教你30秒发布一个TypeScript包到NPM的方法步骤

    这篇文章主要介绍了教你30秒发布一个TypeScript包到NPM的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • 微信小程序实现收货地址左滑删除

    微信小程序实现收货地址左滑删除

    这篇文章主要为大家详细介绍了微信小程序实现收货地址左滑删除,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • js代码实现轮播图

    js代码实现轮播图

    这篇文章主要为大家详细介绍了js代码实现轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • JavaScript类型系统之Object详解

    JavaScript类型系统之Object详解

    对象其实就是一组数据和功能的集合。对象可以通过执行new操作符后跟要创建的对象类型的名称来创建。而创建Object类型的实例并为其添加属性和(或)方法,就可以创建自定义对象
    2016-01-01
  • JavaScript实现弹出模态窗体并接受传值的方法

    JavaScript实现弹出模态窗体并接受传值的方法

    这篇文章主要介绍了JavaScript实现弹出模态窗体并接受传值的方法,涉及JavaScript模态窗体的实现及基于URL的传值操作技巧,需要的朋友可以参考下
    2016-02-02
  • 解决LayUI表单获取不到data的问题

    解决LayUI表单获取不到data的问题

    今天小编就为大家分享一篇解决LayUI表单获取不到data的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 图片加载完成再执行事件的实例

    图片加载完成再执行事件的实例

    下面小编就为大家分享一篇图片加载完成再执行事件的实例,具有很好的参考价值,一起跟随小编过来看看吧,希望对大家有所帮助
    2017-11-11
  • 完美实现js焦点轮播效果(一)

    完美实现js焦点轮播效果(一)

    这篇文章主要为大家详细介绍了完美实现js焦点轮播效果的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 从javascript语言本身谈项目实战

    从javascript语言本身谈项目实战

    从javascript语言本身谈项目实战...
    2006-12-12

最新评论