BootStrap+Table ソート ページング シーケンス番号

今回は、BootStrap+Table のソートとページングのシリアル番号と、BootStrap+Table のソートとページングのシリアル番号の 注意点 について説明します。以下は実際的なケースです。見てみましょう。

はじめに

• ブートストラップ テーブルを使用する場合は、必然的にページングを使用することになります。ページングには、クライアント ページングとサーバー ページングの 2 つの方法があります。

• 一般的に、プロジェクトではクライアントページングは​​使用されません。一般に、テーブルデータの量が多く、クライアントページングを使用するとキャッシュの爆発を引き起こすため、サーバーページングを選択します。

• その存在は合理的であり、クライアントでも使用できます（データ量が特に少ない場合）。サーバー方式と比較して、そのページングシーケンス番号は自動的に連続します。サーバー モード ページングのシリアル番号は連続していません (各ページは、前のページの最後のシリアル番号からではなく、1 から始まります)。この記事では、この問題の解決に焦点を当てます。

元のページ分割された結果

• クライアントページングでは、ブートストラップテーブルのフォーマッタのインデックス値を使用してシリアル番号を連続させることができます

• サーバー ページングでは、現在のページ位置の pageNumber と各ページのサイズ pageSize が不足しているため、フォーマッタを使用してインデックスを返すのは現在のページのインデックスのみです。

解決手順

この問題の原因は何ですか? 私たちが使用するフォーマッタによって返されるインデックス パラメータは、クライアントの合計 n 個のデータすべてがクライアント上にあり、インデックスは 1 ～ n であるためです。サーバーは毎回ページングを行う サーバーは現在のページのデータのみをクライアントに返すため、インデックスは 1-pageSize のみであり、pageSize は 1 ページのデータ量であるため、この問題が発生します。

サーバーが 1 ページのデータしか返さないため、ページをめくるたびにシリアル番号が 1 から始まるという問題を考慮して、サーバーとクライアントのページ データを関連付ける必要があるため、それに基づいて修正します。元のフォーマッタでは、このパラメータを渡せば問題ありません。

まず、ブーストラップ テーブルの JS ソース コードを見てみましょう。次のような

内部関数 がどのように記述されているかがわかります。 では、関数関数を自分で定義できるでしょうか?答えは「はい」です。必要なインデックス値を返す関数も作成します。次のように定義されます:

 BootstrapTable.prototype.showRow = function (params) {
  this.toggleRow(params, true);
 };

インデックス パラメータを渡すためにこの関数を作成できる理由は、pageSize と pageNumber 自体がブートストラップ テーブルの内部パラメータであり、それらはすべてオプションに統合されているためです。そのため、このパラメータがあれば、これを返す関数を作成できます。価値。

関数を作成した後、この関数を内部関数リストに記述する必要があります。そうしないと、次のように getIndex を元の関数と同様に挿入します (4 行目):

 BootstrapTable.prototype.getPage = function (param) {
  return this.options.pageSize * this.options.pageNumber + 1;
 }

このようにして、テーブル内で getIndex メソッドを使用して、ページングのシリアル番号の連続性を実現します (編集可能: {…} は行編集です。他のブログを参照してください):

var allowedMethods = [
  'getOptions',
  'getSelections', 'getAllSelections', 'getData', 'getIndex',
  'load', 'append', 'prepend', 'remove', 'removeAll',
  'insertRow', 'updateRow', 'updateCell', 'updateByUniqueId', 'removeByUniqueId',
  'getRowByUniqueId', 'showRow', 'hideRow', 'getHiddenRows',
  'mergeCells',
  'checkAll', 'uncheckAll', 'checkInvert',
  'check', 'uncheck',
  'checkBy', 'uncheckBy',
  'refresh',
  'resetView',
  'resetWidth',
  'destroy',
  'showLoading', 'hideLoading',
  'showColumn', 'hideColumn', 'getHiddenColumns', 'getVisibleColumns',
  'showAllColumns', 'hideAllColumns',
  'filterBy',
  'scrollTo',
  'getScrollPosition',
  'selectPage', 'prevPage', 'nextPage',
  'togglePagination',
  'toggleView',
  'refreshOptions',
  'resetSearch',
  'expandRow', 'collapseRow', 'expandAllRows', 'collapseAllRows',
  'updateFormatText'
 ];

最終結果は、クライアントのページング シーケンス番号と同じになります。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JS+canvas は円グラフを描画します

js は文字制限を実装します 漢字 = 2 文字

以上がBootStrap+Table ソート ページング シーケンス番号の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。