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

この記事は主に 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="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) {
    $('#table').bootstrapTable('selectPage', parseInt(pageNum));
  }
}

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

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

関連する推奨事項:

新しい JSP ページにジャンプする Ajax の方法について共有します

JSを使用して現在のドメイン名を決定し、指定したページにジャンプします

サーブレットがJSPページにジャンプした後のパスの問題の関連説明

以上がbootstrap-table.js にxxページへジャンプする機能を実装するメソッドを追加の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。