分頁組件 - 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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。