ホームページ > 記事 > ウェブフロントエンド > bootstrap-table.js にxxページへジャンプする機能を実装するメソッドを追加

bootstrap-table.js にxxページへジャンプする機能を実装するメソッドを追加

PHPzオリジナル: 2018-05-10 13:52:444460ブラウズ

この記事は主に bootstrap-table.js 拡張ページングツールバーを紹介し、エディターのレベルがまだ dom レベルにあるため、この拡張機能はページ上のテーブルのみをサポートします。何か良い提案があれば。、ようこそ、提案してください。皆さんのお役に立てれば幸いです。

【関連ビデオ推奨: ブートストラップチュートリアル】

新しいプロジェクト、ページ上にテーブルを表示するためにブートストラップテーブルコントロールを使用します。残念ながら、このコントロールのページングツールバーにはその機能がありません。会社のアーティスト (絵しか制作できないが、あれやこれやと要求してくるアーティスト) の厳しいニーズに応えるために、私は、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="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

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

bootstrap-table.js にxxページへジャンプする機能を実装するメソッドを追加

関連記事