jEasyUI カスタムページング

jEasyUI を使用したカスタムページング機能の実装

概要

この記事では、jEasyUI DataGrid でカスタムページング機能を実装する方法について詳しく説明します。フロントエンドのページレイアウト、JavaScript コードの記述、バックエンドとのデータ連携など、具体的な手順を紹介します。

1. ページレイアウトと DataGrid の初期化

jEasyUI 関連の CSS と JS ファイルを読み込みます。
DataGrid コンポーネントを配置するための div コンテナを作成します。
JavaScript を使用して DataGrid を初期化し、ページングパラメータ `pagination: true` を設定します。


<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>

<div id="dg"></div>

<script type="text/javascript">
    $(function(){
        $('#dg').datagrid({
            url:'datagrid_data1.json',
            // ...その他の DataGrid 設定項目...
            pagination: true,
            // ...カスタムページング設定項目...
        });
    });
</script>

2. カスタムページングコントロール

デフォルトのページングツールバーを非表示にします (`showPager: false`)。
HTML を使用して、カスタムページングボタンと情報表示領域を作成します。
JavaScript を使用して、カスタムページングボタンにイベントをバインドします。例えば、先頭ページ、前ページ、次ページ、最終ページ、特定ページへのジャンプなどです。


<div id="pagination">
    <button id="firstBtn">先頭ページ</button>
    <button id="prevBtn">前ページ</button>
    <span>現在のページ:<span id="currentPage">1</span>/<span id="totalPage">1</span></span>
    <button id="nextBtn">次ページ</button>
    <button id="lastBtn">最終ページ</button>
    <input type="text" id="pageNum" value="1" style="width: 30px;">ページへ移動
    <button id="goBtn">GO</button>
</div>

<script type="text/javascript">
    // ...DataGrid オブジェクトの取得...
    // ...ボタンイベントのバインド、例えば:
    $('#goBtn').click(function(){
        var pageNum = $('#pageNum').val();
        // ...ページ番号の有効性チェック...
        // ...DataGrid API を呼び出して指定ページにジャンプ...
    });
    // ...他のボタンイベントも同様...
</script>

3. フロントエンドとバックエンドのデータ連携

バックエンドは、フロントエンドのリクエストパラメータに基づいて、対応するページのデータを返します。
フロントエンドは、バックエンドから返されたデータに基づいて、DataGrid の内容とカスタムページングコントロールの情報表示を更新します。


// ...DataGrid オブジェクトの取得...
// ...DataGrid の onLoadSuccess イベントでカスタムページング情報を更新...
onLoadSuccess: function(data){
    $('#currentPage').text(data.currentPage);
    $('#totalPage').text(data.totalPage);
    // ...その他のページング情報の更新...
}

まとめ

上記の手順に従うことで、jEasyUI DataGrid のカスタムページング機能を簡単に実装し、実際のニーズに合わせてページングコントロールのスタイルや機能を柔軟にカスタマイズして、ユーザーエクスペリエンスを向上させることができます。

QA

Q1: カスタムページングでページ数を表示するにはどうすればよいですか？: A1: バックエンドから総ページ数を受け取り、ページネーション領域に表示します。上記コード例では、`totalPage`という要素に総ページ数を表示しています。
Q2: 特定ページにジャンプするボタンをクリックしたときにデータが読み込まれない場合はどうすればよいですか？: A2: ボタンクリック時に、DataGrid の `load` メソッドを呼び出して、指定ページのデータを読み込むようにしてください。`load` メソッドには、ページ番号などをパラメータとして渡すことができます。
Q3: カスタムページングのスタイルを変更するにはどうすればよいですか？: A3: ページネーション領域の HTML 要素に CSS を適用することで、自由にスタイルを変更できます。jEasyUI のテーマに合わせたスタイルにすることも可能です。