MvcPager分頁控件適用于Bootstrap的示例分析

 «
 1 (current)
 ...
 

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

這里就比較簡單了,一個(gè)div 下只有a 標(biāo)簽.

 那么問題來了，我們該怎么修改源碼來達(dá)到Bootstrap 分頁效果呢？

1、到官網(wǎng)下載MvcPager 源代碼

2、開始研究html 生成規(guī)則.

 這兩步筆者已經(jīng)幫你做了，下面跟我一起來做修改.

  通過代碼調(diào)試跟蹤和查看源碼注釋，我們知道了最終的HTML 呈現(xiàn)是在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標(biāo)簽。由于ul標(biāo)簽是最后加上去的所以我們在這里修改：

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() + "";

    有了以上還不行，還需要為當(dāng)前頁增加樣式，

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

 private string GenerateAjaxAnchor(PagerItem item)
 {
  string url = GenerateUrl(item.PageIndex);
  if (string.IsNullOrWhiteSpace(url))
   //這里直接假的行內(nèi)樣式，可以使用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標(biāo)簽
  return "
" + tag.ToString(TagRenderMode.Normal) + "
";
 }

 對(duì)源代碼的修改就是這么多了，我們一起看看效果.

  中文版效果：

英文版效果(同樣是修改源碼，增加了對(duì)英文的支持)：

感謝各位的閱讀！關(guān)于“MvcPager分頁控件適用于Bootstrap的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！