如何使用jQuery和AJAX实现Laravel分页点击页码时重新加载表格数据

问题原因 #

• 现有代码的AJAX请求没有携带页码参数，所以每次请求永远返回第一页数据
• 生成的分页<a>标签点击会默认跳转页面，不会触发AJAX逻辑更新表格数据

代码修改 #

后端无需调整 #

Laravel的paginate()方法会自动识别请求携带的page查询参数，自动返回对应页的数据，你现有的Controller代码可以直接复用。

前端JS代码修改 #

把你Blade里的JS替换为以下内容：

$(document).ready(function() {
    // 默认加载第一页数据
    fetchassociate(1);

    // 调整fetchassociate方法支持传入页码参数
    function fetchassociate(page) {
        $.ajax({
            type: "GET",
            url: "{{route('admin.associate')}}",
            data: {page: page}, // 携带页码参数请求
            dataType: "json",
            success: function(response) {
                $('tbody').html("");
                $('#tablefoot').html("");
                // 渲染表格数据
                $.each(response.data, function(key, associates) {
                    $('tbody').append('<tr>\
                        <td>' + associates.associate_id + '</td>\
                        <td>' + associates.last_name + ', ' + associates.first_name + ' ' + associates.middle_name + '</td>\
                        <td>' + associates.username + '</td>\
                        <td>' + associates.email + '</td>\
                        <td>' + associates.phone + '</td>\
                        <td>' + associates.gender + '</td>\
                        <td><button type = "button" value = "' + associates.associate_id + '" class = "edit_associate btn btn-primary btn-sm">Edit</button>\
                        <button type = "button" value = "' + associates.associate_id + '" class = "delete_associate btn btn-danger btn-sm">Delete</button></td>\
                        </tr>');
                });
                // 渲染分页链接，同时增加当前页高亮、禁用状态处理
                $.each(response.links, function(key, link) {
                    let liClass = 'page-item';
                    if(link.active) liClass += ' active';
                    if(!link.url) liClass += ' disabled';
                    $('#tablefoot').append( '<li class="'+liClass+'"><a class="page-link" href="'+link.url+'">'+link.label+'</a></li>');
                });
            }
        });
    }

    // 绑定分页链接点击事件，阻止默认跳转，触发AJAX加载
    $(document).on('click', '.page-link', function(e) {
        e.preventDefault();
        // 禁用状态的链接不触发请求
        if($(this).parent().hasClass('disabled')) return;
        // 从链接地址中提取页码
        let page = new URL($(this).attr('href')).searchParams.get('page');
        fetchassociate(page);
    });
});

验证 #

修改后点击任意页码，会自动触发AJAX请求对应页的数据，重新渲染表格和分页组件，无需跳转页面。

内容的提问来源于stack exchange，提问作者Kraust15