jQuery EasyUI チュートリアル - ページネーション (ページネーション)

この JS ページネーションは非常に楽しく使用できます。私はプロジェクトを行うときに常に以前のプロジェクトを参照する必要があるので、自分自身と他の人が使いやすいように書きました。

$.fn.pagination.defaults を使用してデフォルト値オブジェクトをオーバーライドします。

このページング コントロールを使用すると、ユーザーはページのデータを移動できます。ページ ナビゲーションとページの長さの選択のオプションをサポートします。ユーザーは、ページング コントロールにカスタム ボタンを追加して、その機能を強化できます。

ユースケース:

タグと Javascript の 2 つの方法でページング コントロールを作成します。

1. ラベルを使用してページング コントロールを作成します。

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

2. Javascript を使用してページング コントロールを作成します。

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

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

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

<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=”
).panel(‘refresh’, ‘show_content.php?page=’+pageNumber);
}”>
</div>

デフォルトでは、最初のページのコンテンツがパネルに表示されます。ユーザーがページに移動すると、「onSelectPage」イベントがトリガーされ、対応するページの新しいコンテンツが新しい URL パラメーターに基づいて取得され、コンテンツは「refresh」メソッドを通じてコン​​テンツ パネルに更新されます。

属性:

イベント:

メソッド:

上記は、jQuery EasyUI チュートリアル - ページネーション (ページネーション) の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www) を参照してください。 .php.cn）！

$('#pp').pagination({
	pageList: [10,20,50,100]
});

<div class="easyui-pagination" style
="border:1px solid #ccc" data-options="
		total: 114,
		buttons: [{
			iconCls:&#39;icon-add&#39;,
			handler:function(){alert(&#39;add&#39;)}
		},&#39;-&#39;,{
			iconCls:&#39;icon-save&#39;,
			handler:function(){alert(&#39;save&#39;)}
		}]">
</div>

$('#pp').pagination({
	total: 114,
	buttons: [{
		iconCls:'icon-add',
		handler:function(){alert('add')}
	},'-',{
		iconCls:'icon-save',
		handler:function(){alert('save')}
	}]
});