php+ajax实现无刷新数据分页的办法

2023年5月19日下午9:19 • JavaScript

下面我将为您详细讲解“php+ajax实现无刷新数据分页的办法”的完整攻略。

方案说明

无刷新分页是指在不刷新整个页面的情况下，通过AJAX异步请求服务器上的数据，将数据显示在页面上，以达到分页的效果。

在本方案中，我们将通过PHP语言编写后台处理逻辑，通过AJAX异步请求获取数据，并通过JavaScript操作DOM，将数据展示在页面中，最终实现无刷新数据分页功能。

实现步骤

步骤1：后台代码编写

1.1 准备数据

首先，我们需要准备一些数据作为分页数据源。在本例中，我们可以使用数组来模拟该数据，如下所示：

$data = array(
    array('id'=>1, 'name'=>'小明', 'age'=>18, 'sex'=>'男'),
    array('id'=>2, 'name'=>'小红', 'age'=>19, 'sex'=>'女'),
    array('id'=>3, 'name'=>'小刚', 'age'=>20, 'sex'=>'男'),
    array('id'=>4, 'name'=>'小李', 'age'=>21, 'sex'=>'男'),
    array('id'=>5, 'name'=>'小花', 'age'=>22, 'sex'=>'女'),
    array('id'=>6, 'name'=>'小白', 'age'=>23, 'sex'=>'男'),
    array('id'=>7, 'name'=>'小黑', 'age'=>24, 'sex'=>'男'),
    array('id'=>8, 'name'=>'小绿', 'age'=>25, 'sex'=>'女'),
    array('id'=>9, 'name'=>'小紫', 'age'=>26, 'sex'=>'女'),
    array('id'=>10, 'name'=>'小黄', 'age'=>27, 'sex'=>'男')
);

1.2 获取数据

接着，我们需要根据当前页码和每页数据条数，从数据源中获取对应的数据。我们可以定义一个名为get_data的函数，其代码如下：

function get_data($page, $pageSize, $data)
{
    $start = ($page - 1) * $pageSize;
    return array_slice($data, $start, $pageSize);
}

1.3 返回数据

最后，在我们获取到数据之后，需要将其返回给前台。我们可以定义一个名为get_list的函数，其代码如下：

function get_list($page, $pageSize, $data) {
    $list = get_data($page, $pageSize, $data);
    $total = count($data);
    $result = array(
        'list' => $list,
        'total' => $total
    );
    return json_encode($result);
}

步骤2：前台代码编写

2.1 构建HTML结构

我们需要构建一个表格用于展示数据，以及一个分页栏用于显示页码和实现翻页功能。具体的HTML结构如下所示：

<div id="list-container">
    <table id="data-list">
        <thead>
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <!-- 数据行将在AJAX请求之后动态生成 -->
        </tbody>
    </table>
    <div id="pagination">
        <!-- 分页按钮将在AJAX请求之后动态生成 -->
    </div>
</div>

2.2 发送AJAX请求

接下来，我们需要用JavaScript编写AJAX请求的代码，向后台发送请求并获取数据。具体的JavaScript代码如下所示：

function getList(page) {
    $.ajax({
        url: 'get_list.php',
        type: 'POST',
        dataType: 'json',   // 返回的数据格式为json
        data: {
            page: page,
            pageSize: 3    // 每页显示3条数据
        },
        success: function(res) {
            // 数据请求成功之后的逻辑
            renderList(res.list);   // 渲染数据列表
            renderPagination(page, Math.ceil(res.total/3));  // 渲染分页栏
        },
        error: function(err) {
            // 数据请求失败之后的逻辑
            console.log(err);
        }
    });
}

2.3 渲染数据列表

在AJAX请求成功之后，我们需要根据后台返回的数据，动态生成数据列表。具体的JavaScript代码如下所示：

function renderList(list) {
    var $tbody = $('#data-list tbody');
    $tbody.empty();
    $.each(list, function(i, item) {
        var $tr = $('<tr>').appendTo($tbody);
        $('<td>').text(item.id).appendTo($tr);
        $('<td>').text(item.name).appendTo($tr);
        $('<td>').text(item.age).appendTo($tr);
        $('<td>').text(item.sex).appendTo($tr);
    });
}

2.4 渲染分页栏

最后，我们需要根据后台返回的总数据条数，动态生成分页栏。具体的JavaScript代码如下所示：

function renderPagination(currentPage, totalPage) {
    var $pagination = $('#pagination');
    $pagination.empty();

    // 生成上一页按钮
    var $prev = $('<a>').addClass('prev').text('上一页');
    if (currentPage <= 1) {
        $prev.addClass('disabled');
    } else {
        $prev.click(function() { getList(currentPage-1); });
    }
    $pagination.append($prev);

    // 生成页码按钮
    for (var i = 1; i <= totalPage; i++) {
        var $page = $('<a>').addClass('page-item').text(i);
        if (i === currentPage) {
            $page.addClass('active');
        } else {
            $page.click(function() { getList($(this).text()); });
        }
        $pagination.append($page);
    }

    // 生成下一页按钮
    var $next = $('<a>').addClass('next').text('下一页');
    if (currentPage >= totalPage) {
        $next.addClass('disabled');
    } else {
        $next.click(function() { getList(currentPage+1); });
    }
    $pagination.append($next);
}