jQuery EasyUI 튜토리얼-페이지 매김(페이지 매김)

이 js 페이지네이션은 제가 직접 사용하는 경우가 많습니다. 프로젝트를 진행할 때 항상 이전 프로젝트를 살펴봐야 하는 불편함이 있어서 저와 다른 사람들을 위해 작성했습니다.

기본값 개체를 재정의하려면 $.fn.pagination.defaults를 사용하세요.

이 페이징 컨트롤을 사용하면 사용자가 페이지의 데이터를 탐색할 수 있습니다. 페이지 탐색 및 페이지 길이 선택 옵션을 지원합니다. 사용자는 페이징 컨트롤에 사용자 정의 버튼을 추가하여 기능을 향상시킬 수 있습니다.

사용 사례:

태그와 Javascript를 통해 페이징 컨트롤을 만듭니다.

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 tutorial-Pagination의 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(m.sbmmt.com)를 참고해주세요!

$('#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')}
	}]
});

$('#pp').pagination({
	layout:['first','links','last']
});