结果图
page.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>前端ajax无刷新分页</title> <style> .content{ width: 800px; margin:50px auto; background-color: #cccccc; } th { height: 50px; width: 100px; background: gray; } .page{ width: 80px; } td{ text-align: center; height: 60px; width: 100px; } img{ width: 50px; } a{ width: 25px; line-height: 25px; text-align: center; display: inline-block; border: 1px solid skyblue; background-color: lightcyan; color: gray; text-decoration: none; } a:hover{ background-color: aquamarine; text-decoration: underline ; } .cur{ background-color: chartreuse; } </style> </head> <body> <div class="content"> <table width="800px" rules="all" border="1px"> <thead> <caption><h2>ajax无刷新分页</h2></caption> </thead> <tbody> </tbody> </table> </div> </body> <script src="./ajax.js"></script> <script> window.onload = function () { console.log(localStorage.getItem('p')); if (localStorage.getItem('p')){ p(curpage=localStorage.getItem('p')); }else{ p(curpage=1); localStorage.setItem('p',curpage); } console.log(curpage); // localStorage.setItem('p',curpage); }; // var curpage,tr1,start,end,totalPage; function p(curpage){ $.get('./page.php?page='+curpage,function (msg) { tr1 = '<tr><th>序号</th><th>歌手</th><th>相片</th><th>国籍</th><th>生日</th></tr>'; for (var i=0;i<msg.length-1;i++){ tr1 += "<tr>"; tr1 += "<td>"+msg[i].singerid+"</td>"; tr1 += "<td>"+msg[i].singername+"</td>"; tr1 += "<td><img src ="+msg[i].images+"></td>"; tr1 += "<td>"+msg[i].palace+"</td>"; tr1 += "<td>"+msg[i].birthday+"</td>"; tr1 += "</tr>"; } if (!totalPage){ totalPage = msg[msg.length-1].totalPage; } console.log(msg); var arr = [tr1,totalPage]; mes(arr); // console.log(msg); },'json'); } function mes(val) { tr1 = val[0]; totalPage = val[1]; tr1 += "<tr><td colspan='5' height='35'>"; if (curpage<=5){ start = 1; end = totalPage<10? totalPage:10; }else{ end = parseInt(curpage)+5>totalPage?totalPage:parseInt(curpage)+5; start = end-9<=0? 1:end-9 ; } tr1 += "<a href='javascript:void(0)' class='page' onclick=\"p(1);curpage=1;localStorage.setItem('p',curpage)\">首页</a>"; tr1 += "<a href='javascript:void(0)' class='page' onclick=\"p(curpage = parseInt(curpage)-1<=0? 1:parseInt(curpage)-1);localStorage.setItem('p',curpage)\">上一页</a> "; for (var j=start;j<=end;j++){ if (curpage==j){ tr1 += "<a href='javascript:void(0);' onclick=\"p(this.innerText);curpage=this.innerText;localStorage.setItem('p',curpage)\" class='cur'>"+j+"</a> "; }else{ tr1 += "<a href='javascript:void(0);' onclick=\"p(this.innerText );curpage=this.innerText;localStorage.setItem('p',curpage)\" >"+j+"</a> "; } } tr1 += "<a href='javascript:void(0)' class='page' onclick=\"p(curpage = parseInt(curpage)+1>totalPage? totalPage:parseInt(curpage)+1);localStorage.setItem('p',curpage)\">下一页</a>"; tr1 += "<a href='javascript:void(0)' class='page' onclick=\"p(curpage=totalPage);localStorage.setItem('p',totalPage)\">尾页</a>"; tr1 += "</td></tr>" $('tbody').innerHTML = tr1; } </script> </html> <?php $con = mysqli_connect('127.0.0.1','root','root','music'); if (!$con){ echo '数据库连接失败'.mysqli_connect_errno(); } mysqli_set_charset($con,'utf8'); ##page.php //数据总数 $sql = "select count(singerid) as total from singer"; $res = mysqli_query($con,$sql); $total = mysqli_fetch_row($res); $total = $total[0]; //每页显示行数 $pageSize = 5; //获取当前页 $curpage = isset($_GET['page'])?$_GET['page']:1; //总页数 $totalPage = ceil($total/$pageSize); //echo json_encode($totalPage); //计算出每页该从哪里查 $offect = ($curpage - 1) * $pageSize; //查询所需条数 $sql = "select * from singer limit $offect,$pageSize"; $res = mysqli_query($con,$sql); $row = mysqli_fetch_all($res,MYSQLI_ASSOC); $row[]['totalPage'] = $totalPage; echo json_encode($row); //ajax.js (function () { var $ = function (param) { return document.querySelector(param); }; $.get = function(url,callback,json){ // 实例化对象 var xhr = new XMLHttpRequest(); xhr.onreadystatechange=function(){ if (xhr.readyState==4){ if (json){ callback(JSON.parse(xhr.responseText)); }else { callback(xhr.responseText); } } } xhr.open('get',url); xhr.send(); } window.$ = $; })();
