一、使用layui无刷新分页,需要去layui下载最新的安装包,解压放到项目中。
二、引用文件。
<script type="text/javascript" src="__PUBLIC__/index/js/jquery.js"></script> <script type="text/javascript" src="__PUBLIC__/index/js/layui/layui.js"></script> <link rel="stylesheet" type="text/css" href="__PUBLIC__/index/js/layui/css/layui.css">
三、html页面
<div id="test1"></div> <script type="text/javascript"> layui.use('laypage', function(){ var laypage = layui.laypage; laypage.render({ elem: 'test1' //注意,这里的 test1 是 ID,不用加 # 号 ,count: {$count} //数据总数,从服务端得到 ,limit:12 ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'] ,jump: function(obj, first){ // //obj包含了当前分页的所有参数,比如: console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。 // console.log(obj.limit); //得到每页显示的条数 var first = obj.limit * (obj.curr - 1);// 起始行数 $.ajax({ type: "POST", url: "{:U('Page/ajaxPage')}", data: "first="+first+"&limit="+obj.limit, dataType:'json', success: function(msg){ console.log(msg); if(msg){ var html=''; for (var i =0; i<msg.list.length; i++) { html +=" <tr>" html +=" <td>"+msg.list[i].goods_id+"</td>"; html +=" <td>"+msg.list[i].goods_name+"</td>"; html +=" <td>"+msg.list[i].shop_price+"</td>"; html +=" <td>"+msg.list[i].goods_number+"</td>"; html +=" <td>"+msg.list[i].seller_note+"</td>"; html +=" <td>"+msg.list[i].traffic+"</td>"; html +=" <td>"+msg.list[i].add_time+"</td>"; html +="</tr>"; } } $('.msg').html(html); } }); } }); }); </script>
四、后台数据处理
public function ajaxPage(){ $goods=M('goods'); if(IS_AJAX){ $first=$_POST['first']; $limit=$_POST['limit']; $lists = $goods->field('goods_id,goods_name,shop_price,seller_note,traffic,add_time,goods_number')->order('goods_id desc')->limit($_POST['first'],$_POST['limit'])->select(); foreach($lists as $key=>$value){ $add_time=$value['add_time']; $lists[$key]['add_time']=date('Y-m-d H:i:s', $add_time); } $info=array('list'=>$lists,'code'=>1); echo json_encode($info); }else{ $count = $goods->count();// 查询满足要求的总记录数 $this->assign('count',$count); $this->display(); } }
五、演示
六、代码下载