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

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

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

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



上記は、将来役立つことを願っています。記事:

JavaScriptで画像を取得する方法。トップNのメインカラー値
D3.jsで物流マップを作成する方法(詳細なチュートリアル)
ejsExcelテンプレートの使用方法について

以上がbootstrap-table.js を使用した拡張ページング ツールバー機能の実装についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。