layui框架学习(32:表单)

  Layui中的分页模块laypage支持在指定的容器中显示分页信息,主要是指总页数、当前页面、上一页/下一页等信息,可以配合其它组件实现分页显示数据或者分页显示内容,事实上,Layui中的动态数据表格等模块都附带有显示分页功能。laypage分页模块的基本用法及显示效果如下所示:

	<div class="layui-bg-orange layui-border-green" id="MultyPageDemo" style="width: 500px;margin-top: 50px;"></div>
	<script>
		layui.use('laypage', function(){
		  var laypage = layui.laypage;
		  
		  laypage.render({
			elem: 'MultyPageDemo' ,
			count: 750 ,
			limit:50,
			prev:'<',
			next:'>'				
		  });
		});
	</script>

在这里插入图片描述

  基础参数limit设置每页显示的数据数量,默认为10,该属性可以直接赋值,也可以通过limits属性设置可选值,通过下拉方式选择limit值;
  基础参数limits设置limit属性的可选值,类似于WInform中设置combobox控件的items属性。注意需在layout属性中设置limit参数才能显示limits对应的下拉框。其用法及效果如下所示:

	laypage.render({
		elem: 'MultyPageDemo' ,
		count: 750 ,
		limit:50,
		limits:[10,20,50,100,200],
		layout: ['prev', 'page', 'next', 'limit'],
		prev:'<',
		next:'>'				
	  });

layui框架学习(32:表单)_第1张图片

  基础参数count设置数据总数量,该属性与limit相除即为总页数。
  基础参数groups设置连续出现的页码数量,默认值为5。其效果如下所示:
layui框架学习(32:表单)_第2张图片

  基础参数prev/next/first/last设置分页模块中上一页、下一页、首页和尾页按钮的显示名称,这四个按钮的默认名为分别为上一页、下一页、1、总页码值。其用法及效果如下所示(需在layout属性中设置显示相应的按钮):

	 laypage.render({
		elem: 'MultyPageDemo' ,
		count: 750 ,
		limit:20,
		limits:[10,20,50,100,200],
		prev:'回到上一页',
		next:'跳转到下一页',
		first:'开头页',
		last:'结束页',
		groups:5,
		layout: ['prev', 'page', 'next']
	  });

在这里插入图片描述

  基础参数layout设置分页模块的显示内容和显示顺序,为一字符串数组,每个字符串对应按钮或内容,主要包括count(总条目输区域)、prev(上一页区域)、page(分页区域)、next(下一页区域)、limit(条目选项区域)、refresh(页面刷新区域。注意:layui 2.3.0 新增) 、skip(快捷跳页区域)。其用法已在上面列出,在此不再赘述。
  基础参数theme设置分页模块的样式,可以为颜色值,也可以设置为字符串,后者lauui会自动生成 class=“layui-laypage-xxx” 的CSS类,便于自定义主题。其用法及效果如下所示:

	laypage.render({
		elem: 'MultyPageDemo' ,
		count: 750 ,
		limit:20,
		limits:[10,20,50,100,200],
		prev:'回到上一页',
		next:'跳转到下一页',
		first:'开头页',
		last:'结束页',
		groups:5,
		layout: ['prev', 'page', 'next'],
		theme:'#aa00ff'
	  });

在这里插入图片描述

  基础参数curr设置默认显示页,默认值为1,同时基础参数hash支持自定义哈希值,该参数配合curr支持刷新页面时自动定位到刷新前的页码,具体可以查看参考文献3中分页示例中的“开启HASH”示例,其它示例刷新后默认显示第1页,而次示例则跳转到刷新前的页面。
  基础参数jump设置切换页面时的事件响应函数,通过该事件可以动态加载切换后页码对应的数据,参考文献3中分页示例中有使用示例,有兴趣的可以参考。

参考文献:
[1]B站:layui框架精讲全套视频教程
[2]https://layui.gitee.io/v2/docs/
[3]https://layui.gitee.io/v2/demo/
[4]https://github.com/layui/layui/

你可能感兴趣的:(网页编程,layui,分页,laypage)