一、使用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页面
<script type="text/javascript"> layui.use('flow', function(){ var flow = layui.flow; flow.load({ elem: '#LAY_demo2' //流加载容器 ,scrollElem: '' //滚动条所在元素,一般不用填,此处只是演示需要。 ,isAuto: true //false 点击加载 ture 流动加载 ,isLazyimg: true ,done: function(page, next){ //加载下一页 var count={$count}; //总页数 var limit=12;//每页显示的条数 var first = limit * (page - 1);// 起始行数 setTimeout(function(){ var lis = []; $.ajax({ type: "POST", url: "{:U('page/ajaxMore')}", data: "first="+first+"&limit="+limit, dataType:'json', success: function(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').append(html); } }); next(lis.join(''), page < {$count}); //总页数 }, 500); } });
四、后台数据处理
public function ajaxMore() { $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('ajaxMore'); } }
五、演示
六、代码下载