bootstrap-table.js擴(kuò)展分頁工具欄(增加跳轉(zhuǎn)到xx頁)功能
新項(xiàng)目，準(zhǔn)備引用bootstrap-table這個(gè)控件來展示頁面上的表格，無奈這款控件的分頁工具欄沒有跳轉(zhuǎn)到xx頁的功能，為了適應(yīng)公司美工（只會(huì)出圖的美工，卻跟我要求這要求那）的蛋疼需求，硬著頭皮改了一下bootstrap-table的源碼，實(shí)現(xiàn)了此功能。
注：由于本人js水平停留在dom級，此次擴(kuò)展只支持頁面上的單表格，也就是說如果同一個(gè)頁面引用兩次bootstrap-table的話，該跳轉(zhuǎn)將無效。
各路神仙如果有更完美的解決方案，也請留言告訴我一聲，讓我也學(xué)習(xí)一下。
關(guān)于如何引用控件什么的就不說了，網(wǎng)上百度一下說的都比我好，下面直接上源碼。
1、下載bootstrap-table.js的源碼（注意不要下載min的，我下載的版本是：version: 1.11.0），在源碼中以 '<ul class="pagination' 為關(guān)鍵字進(jìn)行檢索，定位到以下代碼
html.push('</div>',
'<div class="pull-' + this.options.paginationHAlign + ' pagination">',
'<ul class="pagination' + sprintf(' pagination-%s', this.options.iconSize) + '">',
'<li class="page-pre"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" >' + this.options.paginationPreText + '</a></li>');
ok，把上面這段代碼覆蓋成下面的代碼
html.push('</div>',
'<div class="goPage"><input type="button" value="跳轉(zhuǎn)" class="pageBtn" onclick="toPage();"></div>',
'<div class="goPage">跳轉(zhuǎn)到第<input id="pageNum" class="pageNum" type="text">頁</div>',
'<div class="pull-' + this.options.paginationHAlign + ' pagination">',
'<ul class="pagination' + sprintf(' pagination-%s', this.options.iconSize) + '">',
'<li class="page-pre"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" >' + this.options.paginationPreText + '</a></li>');
到這，源碼就修改完了。
2、然后，在全局css文件里添加以下class
.pageBtn {
}
.pageNum {
width: 40px;
border-radius: 3px;
}
.goPage {
float: right;
margin-left: 5px;
margin-top: 13px;
height: 30px;
}
如果需要自定義按鈕的樣式，可以在pgeBtn里面自己定義
3、在js文件里添加跳轉(zhuǎn)方法
function toPage() {
var pageNum = $("#pageNum").val();
if (pageNum) {
$('#table').bootstrapTable('selectPage', parseInt(pageNum));
}
}
注意，我的表格id定義為table，需要將$('#table').bootstrapTable換成你自己定義的id
以上，就可以實(shí)現(xiàn)輸入頁碼進(jìn)行跳轉(zhuǎn)了。效果圖如下：
總結(jié)
以上所述是小編給大家介紹的bootstrap-table.js擴(kuò)展分頁工具欄(增加跳轉(zhuǎn)到xx頁)功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
- bootstrap-table組合表頭的實(shí)現(xiàn)方法
- bootstrap-table實(shí)現(xiàn)表頭固定以及列固定的方法示例
- Bootstrap-table使用footerFormatter做統(tǒng)計(jì)列功能
- bootstrap-table實(shí)現(xiàn)服務(wù)器分頁的示例 （spring 后臺(tái)）
- bootstrap-table+treegrid實(shí)現(xiàn)樹形表格
- bootstrap-table formatter 使用vue組件的方法
- Bootstrap-table自定義可編輯每頁顯示記錄數(shù)
- Node.js中Bootstrap-table的兩種分頁的實(shí)現(xiàn)方法
- Bootstrap table學(xué)習(xí)筆記（2） 前后端分頁模糊查詢
- bootstrap table 服務(wù)器端分頁例子分享
- Bootstrap table分頁問題匯總
- bootstrap-table后端分頁功能完整實(shí)例
相關(guān)文章
JavaScript實(shí)現(xiàn)的微信二維碼圖片生成器的示例
二維碼分享功能大多是由后端實(shí)現(xiàn)的,對服務(wù)器的負(fù)載較重,這里有一個(gè)前端實(shí)現(xiàn)的版本，本文介紹了JavaScript實(shí)現(xiàn)的微信二維碼圖片生成器的示例，有需要的可以了解一下。2016-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序如何獲取用戶信息，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
JS冷知識(shí)之不起眼但有用的String.raw方法
String.raw是JavaScript中模板字符串的一個(gè)標(biāo)簽函數(shù)，它的作用是將模板字符串不轉(zhuǎn)義的原始字符串內(nèi)容返回，接下來通過本文給大家介紹JS冷知識(shí)之不起眼但有用的String.raw方法,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了JS中substring與substr的用法講解，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-11-11
JS實(shí)現(xiàn)讓訪問者自助選擇網(wǎng)頁文字顏色的方法
這篇文章主要介紹了JS實(shí)現(xiàn)讓訪問者自助選擇網(wǎng)頁文字顏色的方法,涉及javascript針對radio表單控件的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
javascript一些實(shí)用技巧小結(jié)，學(xué)習(xí)js的朋友可以看下。2011-03-03
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)京東放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
js parentElement和offsetParent之間的區(qū)別
這里主要說的是 offsetParent 屬性，這個(gè)屬性在 MSDN 的文檔中也沒有解釋清楚，這就讓人更難理解這個(gè)屬性。 這幾天在網(wǎng)上找了些資料看看，再加上自己的一些測試，對此屬性有了那么一點(diǎn)的了解，在這里總結(jié)一下。2010-03-03
JS中style屬性...2006-10-10
主要是通過判斷指定位數(shù)的數(shù)字，來判斷并加以算法實(shí)現(xiàn)男女性別的判斷。2009-11-11