這篇文章給大家分享的是有關(guān)MvcPager分頁(yè)控件適用于Bootstrap的示例分析的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
成都創(chuàng)新互聯(lián)公司主要從事成都做網(wǎng)站、成都網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)齊齊哈爾,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108
由于自帶的分頁(yè)樣式不能和項(xiàng)目整體風(fēng)格兼容,所以我們準(zhǔn)備改寫源代碼,使其能夠使用Bootstrap 的分頁(yè)樣式。
先來查看兩種分頁(yè)的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>
一個(gè)ul標(biāo)簽,li 下面有一個(gè)a 標(biāo)簽.
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">首頁(yè)</a> <a disabled="disabled">上一頁(yè)</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/">下一頁(yè)</a> <a href="/mvcpager/demo/basic/5/">尾頁(yè)</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)-->
這里就比較簡(jiǎn)單了,一個(gè)div 下只有a 標(biāo)簽.
那么問題來了,我們?cè)撛趺葱薷脑创a來達(dá)到Bootstrap 分頁(yè)效果呢?
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("<li>" + GenerateAjaxPagerElement(item) + "</li>"); } } else { foreach (PagerItem item in pagerItems) { //修改前 //sb.Append( GeneratePagerElement(item) ); //修改后 sb.Append("<li>" + GeneratePagerElement(item) + "</li>"); } }
修改以上代碼以獲得li標(biāo)簽。由于ul標(biāo)簽是最后加上去的所以我們?cè)谶@里修改:
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 分頁(yè)樣式 tb.InnerHtml = "<ul class='pagination'>" + sb.ToString() + "</ul>";
有了以上還不行,還需要為當(dāng)前頁(yè)增加樣式,
修改后的GenerateAjaxAnchor(PagerItem item) 方法為:
private string GenerateAjaxAnchor(PagerItem item) { string url = GenerateUrl(item.PageIndex); if (string.IsNullOrWhiteSpace(url)) //這里直接假的行內(nèi)樣式,可以使用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標(biāo)簽 return "<li>" + tag.ToString(TagRenderMode.Normal) + "</li>"; }
對(duì)源代碼的修改就是這么多了,我們一起看看效果.
中文版效果:
英文版效果(同樣是修改源碼,增加了對(duì)英文的支持):
感謝各位的閱讀!關(guān)于“MvcPager分頁(yè)控件適用于Bootstrap的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
文章名稱:MvcPager分頁(yè)控件適用于Bootstrap的示例分析
文章轉(zhuǎn)載:http://bm7419.com/article28/jjdgjp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供搜索引擎優(yōu)化、服務(wù)器托管、靜態(tài)網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站排名、建站公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)