Ajax无刷新分页

无刷新分页

整体思路：
用户点击上一页、下一页，点击触发事件，根据当前页码，拼接ajax请求参数，发送请求；
后台接受请求及参数，链接数据库获取数据，处理数据后返回前台；
前台接到数据后，删除旧数据，遍历添加新数据；

前台代码：


<body>
    <a href="" id="s">上一页</a>
    <a href="" id="x">下一页</a>
    <div id="d"></div>
</body>
<script src="ajax.js"></script>
<script>
    var p = 1;
    $.get('./0.8.php?p=' + p, function (d) {
        htmls(d);
    }, 'json');

    $('#x')[0].onclick = function () {

        $.get('./0.8.php?p=' + ++p, function (d) {
            htmls(d);
        }, 'json');
        return false;
    }

    $('#s')[0].onclick = function () {
        $.get('./0.8.php?p=' + --p, function (d) {
            htmls(d);
        }, 'json');
        return false;
    }

    function htmls(d) {
        var tables = '<table border="1">';
        for (var i = 0; i < d.length; i++) {
            tables += '<tr>';
            tables += '<td>' + d[i].name + '</td>';
            tables += '<td>' + d[i].sex + '</td>';
            tables += '<td>' + d[i].age + '</td>';
            tables += '<td>' + d[i].city + '</td>';
            tables += '</tr>';
        }
        tables += '</table>';
        $('#d')[0].innerHTML = tables;
    }
</script>

后台PHP代码：

mysql_connect('localhost','root','');
mysql_query('use test');
mysql_query('set names utf8');
//查询SQL
//获取数据总条数
$sql = "select count(*) as num from test";
$res = mysql_query($sql);
$row = mysql_fetch_assoc($res);
$count= $row['num'];//获取数据总条数

$psize = 3; //设置每页条数
//ceil 向上取整
$pcount = ceil($count/$psize);//最大页码数

//获取get传参，第几页数据
$page = isset($_GET['page'])?$_GET['page']:0;
if($page<1){ //页码小于1，则取1
    $page =1;
}
if($page>$pcount){//页码大于最大数，则去最大数
    $page = $pcount;
}

$offset = ($page-1)*$psize; //计算查询区间
$sql = "select * from test limit $offset,$psize";
$res = mysql_query($sql);
$data = [];
while ($row = mysql_fetch_assoc($res)) {
    $data[] = $row;
}
//返回当前页码数
$data['p'] = $page;
echo json_encode($data);

无刷新分页

猜你喜欢