データテーブルのページネーションの使用

ページング テクノロジを使用すると、大量のデータを小さなチャンクに分けて表示できます。たとえば、Amazon や Flipkart などのオンライン ストアには何百万もの商品が掲載されています。したがって、データの表示にページネーション テクノロジを使用しない場合、ユーザーは最後の商品を表示するために Web ページの最後までスクロールする必要があります。ここで、何百万もの製品の中から最後の製品に到達するまでにどれくらいのスクロールがかかるかを考えてみましょう。

ページネーション テクノロジでは、特定の量のデータを 1 ページに表示します。たとえば、各ページの長さを 100 に設定すると、ユーザーは最初のページに最初の 100 個の製品を表示し、2 番目のページに別の 100 個の製品を表示することができます。

jQuery では、Datatables プラグインを使用して HTML テーブル データをフォーマットします。さらに、テーブルにページネーション機能を追加できます。

Syntax

Grammar

ユーザーは Datatables API を使用して、次の構文に従ってテーブルにページネーションを追加できます。

上記の構文では、ユーザーは「true」または「false」のブール値を使用してページネーションを表示または非表示にすることができます。 pageLength プロパティは、1 ページに表示されるエントリの総数を指定します。

例 1

例 1

以下の例では、カード データのテーブルを作成します。さらに、値「car」を持つ「id」を追加しました。

jQuery では、ID を使用してテーブルにアクセスし、DataTable() 関数を実行します。さらに、このオブジェクトを引数として datatable() メソッドに渡します。このオブジェクトには、ページングを設定するための「paging: true」と「pageLength: 3」が含まれており、ページごとに 3 つの項目を表示します。

例 2

以下の例では、食品関連のデータを保存するテーブルを作成します。ここでは、食品名、カロリー、脂肪、炭水化物などの食品情報を含むオブジェクトの配列を作成します。

その後、配列をループし、配列のオブジェクトごとにテーブル行を作成し、それをテーブル本体に追加します。さらに、食品テーブルのパラメータを渡さずに dataTables() メソッドを実行しました。

出力では、デフォルトでページごとに 10 個の値が表示されることがわかります。ただし、ユーザーはこれを 50 および 100 に変更できます。

jQuery の DataTable プラグインを使用してテーブルにページング機能を追加する方法を学びました。カスタムのページ長を設定する方法も学びました。さらに、ページの長さを受け取るカスタム入力フィールドを作成し、ユーザーの好みに応じてページの長さを設定できます。

以上がデータテーブルのページネーションの使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。