jEasyUI はページング コンポーネントを追加します

jEasyUI DataGrid 分页機能実装詳解 - データページングを簡単にマスター

jEasyUI DataGrid 分页機能実装詳解 - データページングを簡単にマスター

大量のデータを表示する場合、ページングはユーザーエクスペリエンスを向上させるための重要な要素です。jEasyUIは、DataGridコンポーネントで簡単にページングを実装できる強力なJavaScriptフレームワークです。この記事では、jEasyUI DataGridにページング機能を追加する方法をステップバイステップで解説し、コード例とよくある質問への回答を提供します。

什么是 jEasyUI DataGrid 分页？

jEasyUIは、インタラクティブでユーザーフレンドリーなウェブページを構築するための、豊富で使いやすいjQuery UIコンポーネントを提供するJavaScriptフレームワークです。DataGridコンポーネントは、表形式のデータを表示するための強力なツールであり、ソート、フィルタリング、ページングなどの機能を備えています。

データページングは、大量のデータを小さなチャンクに分割し、一度に1ページだけを表示するプロセスです。これにより、ページの読み込み速度が向上し、ユーザーは大量のデータをスクロールすることなく目的の情報に簡単にアクセスできます。

jEasyUI DataGrid 分页実装手順

jEasyUI DataGridにページング機能を実装するには、次の手順に従います。

手順一：必要なjEasyUIファイルをインポートする

まず、HTMLファイルにjQueryとjEasyUIのCSSとJavaScriptファイルをインポートする必要があります。 


<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

手順二：DataGridのHTML構造を作成する

次に、DataGridを表示するHTMLテーブル構造を作成します。 


<table id="myDataGrid">
  <thead>
    <tr>
      <th data-options="field:'id',width:80">ID</th>
      <th data-options="field:'name',width:100">名前</th>
      <th data-options="field:'email',width:150">メールアドレス</th>
    </tr>
  </thead>
</table>

手順三：JavaScriptコードでDataGridを初期化し、ページング属性を設定する

HTML構造ができたので、JavaScriptを使用してDataGridを初期化し、ページング属性を設定します。 


<script type="text/javascript">
$(function() {
  $('#myDataGrid').datagrid({
    url: 'get_data.php', // データを取得するサーバーサイドスクリプトのURL
    method: 'get',
    pagination: true, // ページングを有効にする
    pageSize: 10, // 1ページあたりのデータ数
    pageList: [10, 20, 50], // ユーザーが選択できるページサイズ
  });
});
</script>

手順四：サーバーサイドコードを記述して、ページングパラメータに基づいてデータを取得する

サーバーサイドスクリプト（例：PHP、Java）は、DataGridから送信されたページングパラメータ（ページ番号、ページサイズ）に基づいて、データベースまたはその他のデータソースから対応するデータを取得する必要があります。 


<?php
// データベース接続などの設定

// リクエストパラメータを取得
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$rows = isset($_GET['rows']) ? intval($_GET['rows']) : 10;

// データベースクエリを実行して、指定されたページのデータを取得
$offset = ($page - 1) * $rows;
$sql = "SELECT * FROM users LIMIT $offset, $rows";
$result = mysqli_query($conn, $sql);

// データを配列に変換
$data = array();
while ($row = mysqli_fetch_assoc($result)) {
  $data[] = $row;
}

// JSON形式でデータを出力
header('Content-Type: application/json');
echo json_encode(array('total' => count($data), 'rows' => $data));
?>

コード例：jEasyUI DataGridを使用したページングの実装

以下は、jEasyUI DataGridを使用してページングを実装する完全なHTML、JavaScript、およびPHPコードの例です。 


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jEasyUI DataGrid ページング</title>
  <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>

<table id="myDataGrid">
  <thead>
    <tr>
      <th data-options="field:'id',width:80">ID</th>
      <th data-options="field:'name',width:100">名前</th>
      <th data-options="field:'email',width:150">メールアドレス</th>
    </tr>
  </thead>
</table>

<script type="text/javascript">
$(function() {
  $('#myDataGrid').datagrid({
    url: 'get_data.php',
    method: 'get',
    pagination: true,
    pageSize: 10,
    pageList: [10, 20, 50],
  });
});
</script>

</body>
</html>

jEasyUI DataGrid 分页 よくある質問

jEasyUI DataGridのページングに関するよくある質問とその回答を紹介します。

質問 1：ページングバーのスタイルをカスタマイズするにはどうすればよいですか？

回答：CSSを使用してページングバーの外観をカスタマイズできます。たとえば、ページ番号のフォントサイズを変更したり、背景色を追加したりできます。

質問 2：特定のページにジャンプする機能を実装するにはどうすればよいですか？

回答：DataGridの`select`メソッドを呼び出し、ターゲットページ番号を渡します。たとえば、ページ3にジャンプするには、次のコードを使用します。 


$('#myDataGrid').datagrid('select', 3);

質問 3：ページを切り替えるときにデータの選択状態を維持するにはどうすればよいですか？

回答：DataGridの`idField`プロパティと`onSelectPage`イベントを使用して実現できます。`idField`プロパティは、各データ行を一意に識別するフィールドを指定します。`onSelectPage`イベントは、ページが変更されたときに発生します。

まとめ

jEasyUI DataGridは、ページング機能を簡単に実装できる強力なツールです。この記事で説明した手順に従うことで、大量のデータを表示するWebアプリケーションのパフォーマンスとユーザーエクスペリエンスを向上させることができます。