easyUI入门《六、pagination基础：分页》

最新推荐文章于 2022-05-07 18:07:02 发布

leijiahui

最新推荐文章于 2022-05-07 18:07:02 发布

阅读量143

点赞数

分类专栏： easyUI

本文链接：https://blog.csdn.net/leijiahui/article/details/82353559

版权

easyUI 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<!--引入基本库-->
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/jquery.min.js"></script>
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/locale/easyui-lang-zh_CN.js"></script>
		<link rel="stylesheet" href="jquery-easyui-1.5.5.4/themes/default/easyui.css" />
		<link rel="stylesheet" href="jquery-easyui-1.5.5.4/themes/icon.css" />
	</head>

	<body>
		<div>基础版</div>
		<div class="easyui-pagination" data-options="total:100,pageList:[10,25,50,100],buttons:[{iconCls:'icon-add',handler:function(){alert('add')}}]"></div>

		<div>JS版本</div>
		<div id="page"></div>
		<script>
			$(function() {
				$("#page").pagination({
					total: 200,
					pageList: [10, 25, 50, 100],
					layout: ['list', 'first', 'links', 'last'], //下拉框，首页，链式，尾页
					buttons: [{
						iconCls: 'icon-add',
						handler: function() {
							alert('add')
						},
					}, {
						iconCls: 'icon-save',
						handler: function() {
							alert('save')
						}
					}]
				})
			})
		</script>

		<div>分页嵌入搜索</div>
		<div class="easyui-pagination" data-options="total:100,buttons:$('#sear')"></div>

		<input id="sear" type="text" class="easyui-searchbox" style="width: 30%;" data-options="searcher:doSearch" />
		<script>
			function doSearch(value) {
				alert(value)
			}
		</script>
		
		
		
	</body>

</html>