bootstrap-table.js增加跳到xx頁功能實作方法

本文主要介紹了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(&#39;</p>&#39;, &#39;<p class="pull-&#39; + this.options.paginationHAlign + &#39; pagination">&#39;, &#39;<ul class="pagination&#39; + sprintf(&#39; pagination-%s&#39;, this.options.iconSize) + &#39;">&#39;, &#39;<li class="page-pre"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" >&#39; + this.options.paginationPreText + &#39;</a></li>&#39;);

ok，將這段程式碼覆蓋成下面的程式碼      

  html.push(&#39;</p>&#39;,
        &#39;<p class="goPage"><input type="button" value="跳转" class="pageBtn" onclick="toPage();"></p>&#39;,
        &#39;<p class="goPage">跳转到第<input id="pageNum" class="pageNum" type="text">页</p>&#39;,
        &#39;<p class="pull-&#39; + this.options.paginationHAlign + &#39; pagination">&#39;,
        &#39;<ul class="pagination&#39; + sprintf(&#39; pagination-%s&#39;, this.options.iconSize) + &#39;">&#39;,
        &#39;<li class="page-pre"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" >&#39; + this.options.paginationPreText + &#39;</a></li>&#39;);

到這，原始碼就修改完了。 、然後，在全域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中文網其他相關文章！