欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

bootstrap-table.js擴(kuò)展分頁工具欄(增加跳轉(zhuǎn)到xx頁)功能

 更新時(shí)間：2017年12月28日 15:20:12   作者：floud  
這篇文章主要介紹了bootstrap-table.js擴(kuò)展分頁工具欄，增加跳轉(zhuǎn)到xx頁功能，由于小編的水平停留在dom級，此次擴(kuò)展只支持頁面上的表格，如果大家有好的建議歡迎提出

新項(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)站的支持！

相關(guān)文章

最新評論