ajax无刷新分页

最新推荐文章于 2022-03-28 23:17:27 发布

ling9201314

最新推荐文章于 2022-03-28 23:17:27 发布

阅读量127

点赞数

分类专栏： php 文章标签： ajax分页

本文链接：https://blog.csdn.net/ling9201314/article/details/102863337

版权

php 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

结果图

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>&nbsp;";

        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>&nbsp;";
            }else{
                tr1 += "<a href='javascript:void(0);' onclick=\"p(this.innerText );curpage=this.innerText;localStorage.setItem('p',curpage)\" >"+j+"</a>&nbsp;";
            }
        }
        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.$ = $;
})();

ling9201314

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax无刷新分页

结果图page.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>前端ajax无刷新分页</title> <style> .content{ ...
复制链接

扫一扫