177 lines
4.4 KiB
HTML
Executable File
177 lines
4.4 KiB
HTML
Executable File
|
|
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>功能演示2 - 通用分页组件</title>
|
|
<meta name="renderer" content="webkit">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
|
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
|
|
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<div class="layui-card layadmin-header">
|
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
|
<a lay-href="">主页</a>
|
|
<a><cite>组件</cite></a>
|
|
<a><cite>分页演示二</cite></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-fluid">
|
|
<div class="layui-row layui-col-space15">
|
|
<div class="layui-col-md12">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">显示完整功能</div>
|
|
<div class="layui-card-body">
|
|
<div id="test-laypage-demo7"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-col-md12">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">自定义排版</div>
|
|
<div class="layui-card-body">
|
|
<div id="test-laypage-demo8"></div>
|
|
<div id="test-laypage-demo9"></div>
|
|
<div id="test-laypage-demo10"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-col-md12">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">自定义每页条数的选择项</div>
|
|
<div class="layui-card-body">
|
|
<div id="test-laypage-demo11"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-col-md12">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">将一段已知数组分页展示</div>
|
|
<div class="layui-card-body">
|
|
<div id="test-laypage-demo20"></div>
|
|
<ul id="test-laypage-biuuu_city_list"></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script src="../../../layuiadmin/layui/layui.js"></script>
|
|
<script>
|
|
layui.config({
|
|
base: '../../../layuiadmin/' //静态资源所在路径
|
|
}).extend({
|
|
index: 'lib/index' //主入口模块
|
|
}).use(['index', 'laypage'], function(){
|
|
var laypage = layui.laypage;
|
|
|
|
//完整功能
|
|
laypage.render({
|
|
elem: 'test-laypage-demo7'
|
|
,count: 100
|
|
,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
|
|
,jump: function(obj){
|
|
console.log(obj)
|
|
}
|
|
});
|
|
|
|
//自定义排版
|
|
laypage.render({
|
|
elem: 'test-laypage-demo8'
|
|
,count: 1000
|
|
,layout: ['limit', 'prev', 'page', 'next']
|
|
});
|
|
laypage.render({
|
|
elem: 'test-laypage-demo9'
|
|
,count: 1000
|
|
,layout: ['prev', 'next', 'page']
|
|
});
|
|
laypage.render({
|
|
elem: 'test-laypage-demo10'
|
|
,count: 1000
|
|
,layout: ['page', 'count']
|
|
});
|
|
|
|
//自定义每页条数的选择项
|
|
laypage.render({
|
|
elem: 'test-laypage-demo11'
|
|
,count: 1000
|
|
,limit: 100
|
|
,limits: [100, 300, 500]
|
|
});
|
|
|
|
|
|
//将一段数组分页展示
|
|
|
|
//测试数据
|
|
var testLayPageData = [
|
|
'北京',
|
|
'上海',
|
|
'广州',
|
|
'深圳',
|
|
'杭州',
|
|
'长沙',
|
|
'合肥',
|
|
'宁夏',
|
|
'成都',
|
|
'西安',
|
|
'南昌',
|
|
'上饶',
|
|
'沈阳',
|
|
'济南',
|
|
'厦门',
|
|
'福州',
|
|
'九江',
|
|
'宜春',
|
|
'赣州',
|
|
'宁波',
|
|
'绍兴',
|
|
'无锡',
|
|
'苏州',
|
|
'徐州',
|
|
'东莞',
|
|
'佛山',
|
|
'中山',
|
|
'成都',
|
|
'武汉',
|
|
'青岛',
|
|
'天津',
|
|
'重庆',
|
|
'南京',
|
|
'九江',
|
|
'香港',
|
|
'澳门',
|
|
'台北'
|
|
];
|
|
|
|
//调用分页
|
|
laypage.render({
|
|
elem: 'test-laypage-demo20'
|
|
,count: testLayPageData.length
|
|
,jump: function(obj){
|
|
//模拟渲染
|
|
document.getElementById('test-laypage-biuuu_city_list').innerHTML = function(){
|
|
var arr = []
|
|
,thisData = testLayPageData.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
|
|
layui.each(thisData, function(index, item){
|
|
arr.push('<li>'+ item +'</li>');
|
|
});
|
|
return arr.join('');
|
|
}();
|
|
}
|
|
});
|
|
|
|
});
|
|
</script>
|
|
</body> |