jQuery EasyUI 基礎プラグイン -Pagination ページネーション

jQuery EasyUI 插件jQuery EasyUI プラグイン

$.fn.pagination.defaults を使用してデフォルトの defaults を上書きします。

ページネーション（pagination）は、ユーザーがページをめくってデータをナビゲートできるようにします。ページナビゲーションとページ長さの選択の設定可能なオプションをサポートしています。ユーザーはページネーションの右側にカスタムボタンを追加して機能を拡張できます。

依存

  • linkbutton

使用法

マークアップでページネーション（pagination）を作成します。

<div id="pp" class="easyui-pagination" style="background:#EFEFEF;border:1px solid #ccc;"
    data-options="total:2000,pageSize:10">
</div>

JavaScript を使用してページネーション（pagination）を作成します。

<div id="pp" style="background:#EFEFEF;border:1px solid #ccc;"></div>

$('#pp').pagination({
    total:2000,
    pageSize:10
});

パネル（panel）とページネーション（pagination）プラグインを使用して Ajax ページネーション（pagination）を作成しましょう。ユーザーが新しいページを選択すると、パネル（panel）は指定されたページの対応するコンテンツを表示します。

<div id="content" class="easyui-panel" style="height:200px"
    data-options="href:'show_content.php?page=1'">
</div>
<div class="easyui-pagination" style="border:1px solid #ccc;"
    data-options="
    total: 2000,
    pageSize: 10,
    onSelectPage: function(pageNumber, pageSize){
    $('#content').panel('refresh', 'show_content.php?page='+pageNumber);
    }">
</div>

上部のパネル（panel）はデフォルトで最初のページのコンテンツを表示します。ユーザーがページをナビゲートすると、'onSelectPage' イベントがトリガーされ、そのイベントはコンテンツパネル（panel）の 'refresh' メソッドを呼び出して、新しい URL パラメータを持つ新しいページのコンテンツを読み込みます。

プロパティ

名前 型 説明 デフォルト値
total number レコードの総数。ページネーション（pagination）を作成するときに設定する必要があります。 1
pageSize number ページサイズ。（注：各ページに表示される最大レコード数） 10
pageNumber number ページネーション（pagination）を作成するときに表示されるページ番号。 1
pageList array ユーザーはページサイズを変更できます。pageList プロパティは、変更できるサイズを定義します。
コード例：
$('#pp').pagination({
    pageList: [10,20,50,100]
});
[10,20,30,50]
loading boolean データの読み込み中かどうかを定義します。 false
buttons array,selector カスタムボタンを定義します。可能な値：
1. 配列。各ボタンには2つのプロパティが含まれます：
iconCls：CSS クラス。背景画像を表示します。
handler：ボタンがクリックされたときの処理関数
2. セレクタ。ボタンを指定します。

ボタンはマークアップで宣言できます：
<div class="easyui-pagination" style="border:1px solid #ccc" data-options="
        total: 114,
        buttons: [{
            iconCls:'icon-add',
            handler:function(){alert('add')}
        },'-',{
            iconCls:'icon-save',
            handler:function(){alert('save')}
        }]">
</div>
ボタンは JavaScript を使用して作成することもできます：
$('#pp').pagination({
    total: 114,
    buttons: [{
        iconCls:'icon-add',
        handler:function(){alert('add')}
    },'-',{
        iconCls:'icon-save',
        handler:function(){alert('save')}
    }]
});
null
layout array ページネーションのレイアウト定義。このプロパティはバージョン 1.3.5 から使用可能です。
レイアウト項目には、次の値の1つ以上が含まれます：
1. list：ページサイズリスト。
2. sep：ページボタンの区切り。
3. first：最初のボタン。
4. prev：前のボタン。
5. next：次のボタン。
6. last：最後のボタン。
7. efresh：更新ボタン。
8. manual：ページ番号を入力するための手動ページ番号入力ボックスを許可します。
9. links：ページ番号リンク。

コード例：
$('#pp').pagination({
    layout:['first','links','last']
});
links number リンク数。'links' 項目が 'layout' に含まれている場合にのみ有効です。このプロパティはバージョン 1.3.5 から使用可能です。 10
showPageList boolean ページリストを表示するかどうかを定義します。 true
showRefresh boolean 更新ボタンを表示するかどうかを定義します。 true
beforePageText string input コンポーネントの前に label を表示します。 Page
afterPageText string input コンポーネントの後に label を表示します。 of {pages}
displayMsg string Display a page information. {from} to {to} of {total} のページ情報を表示します。

イベント

名前 パラメータ 説明
onSelectPage pageNumber, pageSize ユーザーが新しいページを選択したときにトリガーされます。コールバック関数には2つのパラメータが含まれます：
pageNumber：新しいページ番号
pageSize：新しいページサイズ

コード例：
$('#pp').pagination({
    onSelectPage:function(pageNumber, pageSize){
        $(this).pagination('loading');
        alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
        $(this).pagination('loaded');
    }
});
onBeforeRefresh pageNumber, pageSize 更新ボタンがクリックされる前にトリガーされます。false を返すと更新アクションがキャンセルされます。
onRefresh pageNumber, pageSize 更新後にトリガーされます。
onChangePageSize pageSize ユーザーがページサイズを変更したときにトリガーされます。

メソッド

名前 パラメータ 説明
options none オプション（options）オブジェクトを返します。
loading none ページネーション（pagination）を読み込み中（loading）状態にします。
loaded none ページネーション（pagination）を読み込み完了（loaded）状態にします。
refresh options 更新してページネーション情報を表示します。このメソッドはバージョン 1.3 から使用可能です。
コード例：
$('#pp').pagination('refresh');    // 刷新分页栏信息
$('#pp').pagination('refresh',{    // 改变选项，并刷新分页栏信息
    total: 114,
    pageNumber: 6
});
select page 新しいページを選択します。ページインデックスは 1 から始まります。このメソッドはバージョン 1.3 から使用可能です。
コード例：
$('#pp').pagination('select');    // 刷新当前页面
$('#pp').pagination('select', 2);    // 选择第二页
jQuery EasyUI 插件jQuery EasyUI プラグイン その他の拡張機能