网站建设资讯

NEWS

网站建设资讯

MvcPager分页控件适用于Bootstrap的示例分析-创新互联

这篇文章给大家分享的是有关MvcPager分页控件适用于Bootstrap的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

创新互联,专注为中小企业提供官网建设、营销型网站制作、响应式网站、展示型做网站、网站制作等服务,帮助中小企业通过网站体现价值、有效益。帮助企业快速建站、解决网站建设与网站营销推广问题。

由于自带的分页样式不能和项目整体风格兼容,所以我们准备改写源代码,使其能够使用Bootstrap 的分页样式。

先来查看两种分页的html代码

Bootstrap 样式:


 «
 (current)
 ...
 

一个ul标签,li 下面有一个a 标签.

MvcPager 样式:


首页  上一页  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的示例分析

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

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

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

    另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


    新闻名称:MvcPager分页控件适用于Bootstrap的示例分析-创新互联
    当前地址:http://njwzjz.com/article/ehhds.html

    其他资讯