1:视图层
<head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css"> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <style> #pageBar { text-align: right; padding: 0 20px 20px 0; } .pageBtn a { display: inline-block; border: 1px solid #aaa; padding: 2px 5px; margin: 0 3px; font-size: 13px; background: #ECECEC; color: black; text-decoration: none; -moz-border-radius: 2px; -webkit-border-radius: 3px; } .pageBtn-selected a { display: inline-block; border: 1px solid #aaa; padding: 2px 5px; margin: 0 3px; font-size: 13px; background: #187BBD; color: white; text-decoration: none; -moz-border-radius: 2px; -webkit-border-radius: 3px; } .pageBtn a:hover { background: #187BBD; color: white; } </style>
<!--商品列表开始--> <div class="jumbotron"> <div id="data-area"> <!--这里添加分页数据--> <ul> </ul> </div> <div id="pageBar"><!--这里添加分页按钮栏--></div> <!--商品列表开始-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script> var curPage; //当前页数 var totalItem; //总记录数 var pageSize; //每一页记录数 var totalPage; //总页数 //获取分页数据 function turnPage(page) { $.ajax({ type: 'get', url: 'goods', //这里是请求的后台地址,自己定义 data: {'curPage': page}, dataType: 'json', beforeSend: function () { $("#data-area ul").append("加载中..."); }, success: function (data) { $("#data-area ul").empty(); //移除原来的分页数据 totalItem = data.data.totalItem; // 返回的总记录数 pageSize = data.data.pageSize; //返回的每一页记录数 curPage = page; //返回的当前页码 totalPage = data.data.totalPage; //返回的总页数 var data_content = data.data.data_content; //返回的数据内容 var data_html = ""; //数据输出的html代码 //添加新的分页数据(数据的显示样式根据自己页面来设置,这里只是一个简单的列表) $.each(data_content, function (index, array) { data_html += "<li style='list-style-type:none;'>" + "<input name='checkbox' type='checkbox' value="+array['id']+" />"+array['id'] + " " + array['title'] + " " + array['zk_final_price'] +"<img src="+ array['pict_url'] +" style='width:50px;height:50px;'/>"+ "</li>"; }); //遍历数据,形成html代码 $("#data-area ul").append(data_html); //输出html代码 getPageBar(); }, /* complete: function() { //添加分页按钮栏 getPageBar(); },*/ error: function () { alert("数据加载失败"); } }); } /* curPage; //当前页数 totalItem; //总记录数 pageSize; //每一页记录数 totalPage; //总页数 */ //获取分页条(分页按钮栏的规则和样式根据自己的需要来设置) function getPageBar() { //防止数据错误时候出现当前页数大于总页数 if (curPage > totalPage) { curPage = totalPage; } //防止数据错误时候出现当前页数小于第一页 if (curPage < 1) { curPage = 1; } //定义分页按钮html代码 pageBar = ""; //如果不是第一页 if (curPage != 1) { pageBar += "<span class='pageBtn'><a href='javascript:turnPage(1)'>首页</a></span>"; pageBar += "<span class='pageBtn'><a href='javascript:turnPage("+(curPage-1)+")'>上一页</a></span>"; } //显示的页码按钮(5个) //定义start 和end两个变量准备循环输出可见的分页按钮 var start, end; if (totalPage <= 5) { start = 1; end = totalPage; } else { //当前页码与总页数相差1个的时候,要显示之前的页码 if (totalPage - curPage < 2) { start = totalPage - 4; end = totalPage; } else { //显示前面两个和后面两个 start = curPage - 2; end = curPage + 2; } } //如果不是最后页,显示输出“下一页 , 末页” if (curPage != totalPage) { pageBar += "<span class='pageBtn'><a href='javascript:turnPage(" + (parseInt(curPage) + 1) + ")'>下一页</a></span>"; pageBar += "<span class='pageBtn'><a href='javascript:turnPage(" + totalPage + ")'>末页</a></span>"; } //匹配改变pageBar里面的内容 $("#pageBar").html(pageBar); } //页面加载时初始化分页 $(function () { turnPage(1); }); </script>
2:控制器里
public function goods(){ if(request()->isAjax()){ //1.获取数据(curPage) $page=input('get.'); $curPage = $page['curPage']; //2.定义分页所需的数据 $totalItem = Tbgoods::count(); //总记录数(自行定义) $pageSize='10'; //每一页记录数(自行定义) $totalPage =ceil($totalItem/$pageSize); //总页数 $startItem = ($curPage-1) * $pageSize;//根据页码来决定查询数据的节点 //3.查询数据 $res=Tbgoods::limit($startItem,$pageSize) ->select(); //4.放入所有数据 $arr['totalItem']=$totalItem; $arr['pageSize']=$pageSize; $arr['totalPage']=$totalPage; foreach($res as $lab) { $arr['data_content'][] = $lab; } //5.结果返回(此处没有判定是否查询成功) $this->result($arr,'1','成功','json'); } }