首頁  >  文章  >  web前端  >  有關使用bootstrap-table.js實作擴充分頁工具列功能

有關使用bootstrap-table.js實作擴充分頁工具列功能

亚连
亚连原創
2018-06-14 16:33:561807瀏覽

這篇文章主要介紹了bootstrap-table.js擴充分頁工具欄,增加跳到xx頁功能,由於我的水平停留在dom級,此次擴充只支援頁面上的表格,如果大家有好的建議歡迎提出

新項目,準備引用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;);

    #到這,原始碼就修改完了

    ##22

    .pageBtn {
      
    }
    .pageNum {
      width: 40px;
      border-radius: 3px;
    }
    .goPage {
      float: right;
      margin-left: 5px;
      margin-top: 13px;
      height: 30px;
    }

    #到這,原始碼就修改完了

    ##22

    ##22

    function toPage() {
      var pageNum = $("#pageNum").val();
      if (pageNum) {
        $(&#39;#table&#39;).bootstrapTable(&#39;selectPage&#39;, parseInt(pageNum));
      }
    }
    2。 、然後,在全域css檔案裡加入以下class

    rrreee

    如果需要自訂按鈕的樣式,可以在pgeBtn裡面自己定義3、在js檔案裡加入跳轉方法

    rrreee

    注意,我的表格id定義為table,需要將

    $('#table').bootstrapTable

    換成你自己定義的id

    以上,就可以實現輸入頁碼進行跳轉了。效果圖如下:

    上面是我整理給大家的,希望今後會對大家有幫助。#相關文章:

    在javascript中如何取得圖片的top N主色值

    #在D3.js中如何建立物流地圖(詳細教學)

    ######關於ejsExcel範本使用方法#######

    以上是有關使用bootstrap-table.js實作擴充分頁工具列功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn