本文主要介紹了bootstrap-table.js擴充分頁工具欄,增加跳到xx頁功能,由於小編的水平停留在dom級,此次擴充只支援頁面上的表格,如果大家有好的建議歡迎提出,希望能幫助大家。
【相關影片推薦:Bootstrap教學】
新項目,準備引用bootstrap-table這個控制項來展示頁面上的表格,無奈這款控制的分頁工具列沒有跳到xx頁的功能,為了適應公司美工(只會出圖的美工,卻跟我要求這要求那)的蛋疼需求,硬著頭皮改了一下bootstrap-table的源碼,實現了此功能。
附註:由於本人js水平停留在dom級,此次擴充只支援頁面上的單表格,也就是說如果同一個頁面引用兩次bootstrap-table的話,該跳轉將無效。
各路神仙如果有更完美的解決方案,也請留言告訴我一聲,讓我也學習一下。
關於如何引用控制什麼的就不說了,網路百度一下說的都比我好,下面直接上原始碼。
1、下載bootstrap-table.js的源碼(注意不要下載min的,我下載的版本是:version: 1.11.0),在源碼中以'
html.push('</p>', '<p 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('</p>', '<p class="goPage"><input type="button" value="跳转" class="pageBtn" onclick="toPage();"></p>', '<p class="goPage">跳转到第<input id="pageNum" class="pageNum" type="text">页</p>', '<p 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>');
到這,原始碼就修改完了。 、然後,在全域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以上,就可以實現輸入頁碼進行跳轉了。的方法分享
如何用JS判斷目前網域並跳到指定頁面
Servlet跳到JSP頁面後的路徑問題相關解釋
以上是bootstrap-table.js增加跳到xx頁功能實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!