一个分页功能的实现

依赖layui

链接： http://www.layui.com/demo/laypage.html

<!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="layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
            
 
<button onclick="make(data)">asdfasdf</button>
 
<div id="demo8"></div>
 
<ul id="biuuu_city_list"></ul>              
          
<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>

var data = [2,2,2,2,2,2,2,22,222,2,22,2,2,2,2,2,2]

function make(data,nums=2){

layui.use(['laypage', 'layer'], function(){
  var laypage = layui.laypage
  ,layer = layui.layer;
  
  //测试数据
  
  //模拟渲染
  var render = function(data, curr){
    var arr = []
    ,thisData = data.concat().splice(curr*nums-nums, nums);
    layui.each(thisData, function(index, item){
      arr.push('<li>'+ item +'</li>');
    });
    return arr.join('');
  };
  
  //调用分页
  laypage({
    cont: 'demo8'
    ,pages: Math.ceil(data.length/nums) //得到总页数
    ,jump: function(obj){
      document.getElementById('biuuu_city_list').innerHTML = render(data, obj.curr);
    }
  });
  
 });
}
</script>

</body>
</html>

　　

posted on 2017-07-27 14:44  思此狂  阅读(166)  评论(0)    收藏  举报

导航