bootstrap-table.js を使用した拡張ページングツールバー機能の実装について-jsチュートリアル-php.cn

bootstrap-table.js を使用した拡張ページングツールバー機能の実装について

亚连

リリース： 2018-06-14 16:33:56

オリジナル

1806 人が閲覧しました

この記事では主に bootstrap-table.js 拡張ページングツールバーを紹介し、xx ページにジャンプする機能を追加します。私のレベルは dom レベルで止まっているため、この拡張機能はページ上のテーブルのみをサポートします。何か良い提案があれば、

新しいプロジェクトの提案を歓迎します。残念ながら、このコントロールのページングツールバーには、xx ページにジャンプする機能がありません。同社のアーティスト（絵しか制作できないアーティスト）の皆さん、しかし、あれこれ要望があったので、思い切ってbootstrap-tableのソースコードを変更してこの機能を実装しました。

注: 私の js レベルは dom レベルで止まっているため、この拡張機能はページ上の 1 つのテーブルのみをサポートします。つまり、同じページが bootstrap-table を 2 回参照すると、ジャンプは無効になります。

もしあらゆる立場の神がより完璧な解決策を持っているなら、私がそこから学ぶことができるようにメッセージを残して教えてください。

コントロールを参照する方法については詳しく説明しません。インターネット上の Baidu の方が詳しいです。ソースコードを見てみましょう。

1. bootstrap-table.js のソースコードをダウンロードします (ダウンロードしないように注意してください。私がダウンロードしたバージョンは次のとおりです: 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;);

ログイン後にコピー

を見つけて、上記のコードを次のコード

  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;);

ログイン後にコピー

に組み込みます。この時点で、ソースコードが変更されます

2。次に、次のクラス

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

ログイン後にコピー

をグローバルに追加します。必要に応じて css ファイルをカスタマイズします。pgeBtn

3 で自分で定義できます。js ファイルにジャンプメソッドを追加します

function toPage() {
  var pageNum = $("#pageNum").val();
  if (pageNum) {
    $(&#39;#table&#39;).bootstrapTable(&#39;selectPage&#39;, parseInt(pageNum));
  }
}

ログイン後にコピー

私のテーブル ID は table として定義されていることに注意してください。$('#table').bootstrapTable を独自のものに置き換える必要があります。定義された ID

上に、ページ番号を入力してジャンプできます。レンダリングは次のとおりです。