分页组件 - layui.laypage

时间 2019-12-02
标签分页组件 layui.laypage layui laypage 繁體版
原文原文链接
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</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, maximum-scale=1">
  <link rel="stylesheet" href="css/layui.css"  media="all">
</head>
<body>
            
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>开门见山 ： 默认分页</legend>
</fieldset>
 
<div id="demo1"></div>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>自定义主题 ： 赤橙黄绿青蓝紫 神马的，随便设:-O</legend>
</fieldset>
 
<div id="demo2"></div>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>自定义文本 ： 上一页、下一页、首页、末页通通被替换</legend>
</fieldset>
 
<div id="demo3"></div>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>不显示首页、末页</legend>
</fieldset>
 
<div id="demo4"></div>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>开启 URL hash</legend>
</fieldset>
 
<div id="demo5"></div>
 
<blockquote class="layui-elem-quote">
  切换分页后看地址栏的变化（#后面的fenye名字能够随便定义），该功能对于单页应用有着极大的帮助
</blockquote>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>只显示上一页、下一页</legend>
</fieldset>
 
<div id="demo6"></div>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>是时候看一下完整功能了！</legend>
</fieldset>
 
<div id="demo7"></div>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>将一段已知数组分页展现</legend>
</fieldset>
 
<div id="demo8"></div>
 
<ul id="biuuu_city_list"></ul>              
          
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>  
<script src="layui.js" charset="utf-8"></script>  
<script>
layui.use(['laypage', 'layer'], function(){
  var laypage = layui.laypage
       ,layer = layui.layer;
  
  laypage({
    cont: 'demo1' //容器，值能够传入元素id或者原生DOM或jquery对象，如：cont:'id'
 //cont:document.getElementById('id'); cont:$('#id');
    ,pages: 100 //总页数
    ,groups: 5 //连续显示分页数
  });
  
  laypage({
    cont: 'demo2'
    ,pages: 100
    ,skin: '#1E9FFF'  //控制分页皮肤
  });
  
  laypage({
    cont: 'demo3'
    ,pages: 100
    ,first: 1           //控制首页，值支持三种类型，如：first:'首页' first:false则表示不显示首页项
    ,last: 100          //控制尾页，值支持三种类型，如：last:'尾页' last:false则表示不显示尾页项
    ,prev: '<em><</em>'
    ,next: '<em>></em>'
  });
  
  laypage({
    cont: 'demo4'
    ,pages: 100
    ,first: false
    ,last: false
  });
  
  laypage({
    cont: 'demo5'
    ,pages: 100
    ,curr: location.hash.replace('#!fenye=', '') //获取hash值为fenye的当前页
    ,hash: 'fenye' //自定义hash值
  });
  
  laypage({
    cont: 'demo6'
    ,pages: 5
    ,groups: 0
    ,first: false
    ,last: false
    ,jump: function(obj, first){
      if(!first){
        layer.msg('第 '+ obj.curr +' 页');
      }
    }
  });
  
  laypage({
    cont: 'demo7'
    ,pages: 100
    ,skip: true
  });
  
  
  //将一段数组分页展现
  
  //测试数据
  var data = [
    '北京',
    '上海',
    '广州',
    '深圳',
    '杭州',
    '长沙',
    '合肥',
    '宁夏',
    '成都',
    '西安',
    '南昌',
    '上饶',
    '沈阳',
    '济南',
    '厦门',
    '福州',
    '九江',
    '宜春',
    '赣州',
    '宁波',
    '绍兴',
    '无锡',
    '苏州',
    '徐州',
    '东莞',
    '佛山',
    '中山',
    '成都',
    '武汉',
    '青岛',
    '天津',
    '重庆',
    '南京',
    '九江',
    '香港',
    '澳门',
    '台北'
  ];
  
  var nums = 5; //每页出现的数据量
  
  //模拟渲染
  var render = function(curr){
    //此处只是演示，实际场景一般是返回已经当前页已经分组好的数据
    var str = '', last = curr*nums - 1;
    last = last >= data.length ? (data.length-1) : last;
    for(var i = (curr*nums - nums); i <= last; i++){
      str += '<li>'+ data[i] +'</li>';
    }
    return str;
  };
  
  //调用分页
  laypage({
    cont: 'demo8'
    ,pages: Math.ceil(data.length/nums) //获得总页数
    ,jump: function(obj){
      document.getElementById('biuuu_city_list').innerHTML = render(obj.curr);
    }
  });
  
});
</script>

</body>
</html>