溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
新項目，準備引用bootstrap-table這個控件來展示頁面上的表格，無奈這款控件的分頁工具欄沒有跳轉到xx頁的功能，為了適應公司美工（只會出圖的美工，卻跟我要求這要求那）的蛋疼需求，硬著頭皮改了一下bootstrap-table的源碼，實現了此功能。
注：由于本人js水平停留在dom級，此次擴展只支持頁面上的單表格，也就是說如果同一個頁面引用兩次bootstrap-table的話，該跳轉將無效。
各路神仙如果有更完美的解決方案，也請留言告訴我一聲，讓我也學習一下。
關于如何引用控件什么的就不說了，網上百度一下說的都比我好，下面直接上源碼。
1、下載bootstrap-table.js的源碼（注意不要下載min的，我下載的版本是：version: 1.11.0），在源碼中以 '<ul class="pagination' 為關鍵字進行檢索，定位到以下代碼
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="跳轉" class="pageBtn" onclick="toPage();"></div>',
'<div class="goPage">跳轉到第<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文件里添加跳轉方法
function toPage() {
var pageNum = $("#pageNum").val();
if (pageNum) {
$('#table').bootstrapTable('selectPage', parseInt(pageNum));
}
}
注意，我的表格id定義為table，需要將$('#table').bootstrapTable換成你自己定義的id
以上，就可以實現輸入頁碼進行跳轉了。效果圖如下：
總結
以上所述是小編給大家介紹的bootstrap-table.js擴展分頁工具欄(增加跳轉到xx頁)功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
