1、引入layui.js和layui.css文件
根据自己情况引入
2、页面代码,找到分页的地方
js部分
/* * 分页 * */ layui.use(['laypage', 'form'], function () { layui.laypage.render({ elem: 'layui_page' //元素ID,不用加# , count: {$count} //数据总数,服务端获取 , layout: ['prev', 'page', 'next', 'limit', 'skip'] //设置分页组件显示 "count"显示总数 , limits: [10, 15, 20, 50, 100, 200, 300] //可选择每页数目 , limit: {$limit} //默认分页 , curr: {$page} // 当前页 , theme: '#1a70cc' //选中的颜色 , prev: '<i class="layui-icon"></i>' //前一页图标(可以写文字) , next: '<i class="layui-icon"></i>' //后一页图标(可以写文字) , jump: function (obj, first) { //分页执行 console.log(obj) // 首次加载 // 跳转到新页面,并且重新加载数据 if (!first) { location.href = "{:url('/admin/user/index')}?page=" + obj.curr + "&limit=" + obj.limit; } } }); })
3、服务端代码
public function index() { //参数 $params = input(''); //查询条件 $where = []; if ($params['username']) { $where['username'] = ['like', '%'.$params['username'].'%']; } if ($params['mobile']) { $where['mobile'] = ['like', '%'.$params['mobile'].'%']; } if ($params['sex'] !== null && $params['sex'] !== "") { $where['sex'] = $params['sex']; } $where['delete_status'] = 0; $page = input('page')??1; $limit = input('limit')??10; $pre = ($page-1)*$limit; //查询数据 $userModel = Db::table('自己表名'); $user_list = $userModel->where($where)->limit($pre,$limit)->paginate($limit); //返回到页面 $this->assign('user_list',$user_list); $this->assign('count',$user_list->total()); $this->assign('page',$page); $this->assign('limit',$limit); return $this->fetch(); }
4、页面效果
自己记录一下