MvcPager分页控件适用于Bootstrap的示例分析

 «
 1 (current)
 ...
 

首页  上一页  1  2  3  4  5  下一页  尾页  12345

这里就比较简单了,一个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("
" + GenerateAjaxPagerElement(item) + "
");
  }
  }
  else
  {
  foreach (PagerItem item in pagerItems)
  {
   //修改前
   //sb.Append( GeneratePagerElement(item) );
   //修改后
   sb.Append("
" + GeneratePagerElement(item) + "
");
  }
  }

  修改以上代码以获得li标签。由于ul标签是最后加上去的所以我们在这里修改：

if (_pagerOptions.ShowPageIndexBox)
  {
  if (!_ajaxPagingEnabled)
  {
   var attrs = new Dictionary();
   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 = "" + sb.ToString() + "";

    有了以上还不行，还需要为当前页增加样式，

    修改后的GenerateAjaxAnchor(PagerItem item) 方法为：

 private string GenerateAjaxAnchor(PagerItem item)
 {
  string url = GenerateUrl(item.PageIndex);
  if (string.IsNullOrWhiteSpace(url))
   //这里直接假的行内样式，可以使用class替换掉
  return "" + item.Text + "";
  //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 "
" + tag.ToString(TagRenderMode.Normal) + "
";
 }

 对源代码的修改就是这么多了，我们一起看看效果.

  中文版效果：

英文版效果(同样是修改源码，增加了对英文的支持)：

感谢各位的阅读！关于“MvcPager分页控件适用于Bootstrap的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！