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 相关文章推荐
javascript 写类方式之二
Jul 05 Javascript
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
用console.table()调试javascript
Sep 04 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
vue实现模态框的通用写法推荐
Feb 26 Javascript
JavaScript时间日期操作实例小结【5个示例】
Dec 22 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 Javascript
JS实现密码框效果
Sep 10 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实现下载生成某链接快捷方式的解决方法
2013/05/07 PHP
简单的cookie计数器实现源码
2013/06/07 PHP
php.ini 配置文件的深入解析
2013/06/17 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
php+ajax无刷新上传图片的实现方法
2016/12/06 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
Python常用列表数据结构小结
2014/08/06 Python
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
初步讲解Python中的元组概念
2015/05/21 Python
Python中文字符串截取问题
2015/06/15 Python
Python遍历目录中的所有文件的方法
2016/07/08 Python
Python实现模拟登录网易邮箱的方法示例
2018/07/05 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
python把转列表为集合的方法
2019/06/28 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
医院护士的求职信
2014/01/03 职场文书
房地产开发计划书
2014/01/10 职场文书
产品包装策划方案
2014/05/18 职场文书
党员检讨书
2014/10/13 职场文书
工会文体活动总结
2015/05/07 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书
AJAX学习笔记
2021/05/18 Javascript