Laravel结合Ajax实现数据分页显示问题求助

你的问题核心是只渲染了表格数据，但没有处理Laravel分页返回的元数据，也没有在视图中添加分页组件容器，以下是具体修复步骤：

1. 调整控制器（优化返回格式） #

Laravel的paginate()返回的对象包含分页所需的所有元数据（当前页、总页数、数据列表等），直接返回整个分页对象能让前端更方便获取分页信息，同时补充搜索条件处理：

public function showJobApplicant(Request $request)
{
    $job = Job::findOrFail($request->id);
    $applicants = DB::table('applicant')
        ->select('*')
        ->join('job_app', 'applicant.id', '=', 'job_app.applicant_oid')
        ->where('job_app.job_oid', $request->id)
        // 处理搜索关键词，分页时保留搜索条件
        ->when($request->keyword3, function($query) use ($request) {
            return $query->where('applicant.id_num', 'like', "%{$request->keyword3}%");
        })
        ->paginate(2);
 
    return response()->json($applicants);
}

2. 视图添加分页容器 #

在表格下方新增一个专门用于渲染分页按钮的容器：

<div class="col-12 table-responsive" id="kt_apps_projects_2">
    <!-- 搜索表单部分保持不变 -->
    <div class="col-md-6">
        <form id="form3" method="POST">
            <div class="input-group mb-3">
                <input type="text" class="form-control" placeholder="البحث برقم الهوية" id="search3">
                <div class="input-group-prepend">
                    <span class="input-group-text" >
                        <i class="flaticon-search-1"></i>
                    </span>
                </div>
            </div>
        </form>
    </div>
    <!-- 表格部分保持不变 -->
    <div class="table-responsive">
        <table class="table table-bordered table-hover">
            <thead>
            <tr>
                <th scope="col" class="text-success">#</th>
                <th scope="col" class="text-success">الاسم الرباعي</th>
                <th scope="col" class="text-success">رقم الهوية</th>
                <th scope="col" class="text-success">تاريخ الميلاد</th>
                <th scope="col" class="text-success">الجنس</th>
                <th scope="col" class="text-success">رقم الجوال</th>
                <th scope="col" class="text-success">الحالة</th>
                <th scope="col" class="text-success">عرض التفاصيل</th>
            </tr>
            </thead>
            <tbody id="applicants"></tbody>
        </table>
    </div>
    <!-- 新增分页容器 -->
    <div id="pagination-container" class="d-flex justify-content-center mt-3"></div>
</div>

3. 修改JavaScript代码，添加分页渲染逻辑 #

更新JS代码，增加分页按钮的渲染和点击事件处理，确保分页时携带搜索关键词和职位ID：

<script>
    let currentPage = 1;
    let jobId = {{$job->id}};

    $('#search3').on('keyup', function(){
        $('#form3').submit(false);
        currentPage = 1; // 搜索时重置为第一页
        search3();
    });
    search3();

    function search3(page = 1){
        currentPage = page;
        var keyword3 = $('#search3').val();
        $.post('{{ route("showJobApplicant") }}',
            {
                _token: $('meta[name="csrf-token"]').attr('content'),
                keyword3: keyword3,
                id: jobId,
                page: page // 传递当前页码
            },
            function(data){
                table_post_row3(data);
                renderPagination(data); // 渲染分页按钮
            });
    }

    // 渲染表格行
    function table_post_row3(res){
        let htmlView = '';
        if(res.data.length <= 0){ // 分页对象的列表数据在data字段中
            htmlView+= `
            <tr>
                <td colspan="8" class="text-center">لا يوجد بيانات لعرضها</td>
            </tr>`;
        }
        for(let i = 0; i < res.data.length; i++){
             var sex = 'أنثى';
            if(res.data[i].sex == 101)
                sex = 'ذكر';
            var url = 'showApplicantInfo/'+ res.data[i].id_num;
            htmlView += `
            <tr>
                <td>${(i+1) + ((currentPage-1)*2)}</td> <!-- 基于当前页计算正确序号 -->
                <td>${res.data[i].f_name} ${res.data[i].m_name} ${res.data[i].s_name} ${res.data[i].l_name}</td>
                <td>${res.data[i].id_num}</td>
                <td>${res.data[i].bdate.split(" ")[0]}</td>
                <td>${sex}</td>
                <td>${res.data[i].mobile_num}</td>
                <td>تحت الدراسة</td> <!-- 补充表头缺失的状态列 -->
                <td><a href="${url}" class="btn btn-sm btn-primary">عرض التفاصيل</a></td> <!-- 补充详情列 -->
            </tr>`;
        }
        $('#applicants').html(htmlView);
    }

    // 渲染分页按钮
    function renderPagination(pagination){
        let paginationHtml = '';
        // 上一页按钮
        if(pagination.current_page > 1){
            paginationHtml += `<button class="btn btn-sm btn-outline-primary mx-1" onclick="search3(${pagination.current_page - 1})">السابق</button>`;
        }
        // 页码按钮
        for(let i = 1; i <= pagination.last_page; i++){
            let activeClass = i === pagination.current_page ? 'btn-primary' : 'btn-outline-primary';
            paginationHtml += `<button class="btn btn-sm ${activeClass} mx-1" onclick="search3(${i})">${i}</button>`;
        }
        // 下一页按钮
        if(pagination.current_page < pagination.last_page){
            paginationHtml += `<button class="btn btn-sm btn-outline-primary mx-1" onclick="search3(${pagination.current_page + 1})">التالي</button>`;
        }
        $('#pagination-container').html(paginationHtml);
    }
</script>

关键修改点： #

• 分页对象的列表数据存储在data字段中，遍历需改用res.data
• 新增renderPagination函数，根据current_page、last_page等元数据生成分页按钮
• 搜索时重置当前页为1，避免停留在之前的页码
• 修正表格序号计算逻辑，确保跨页时序号连续
• 补充原表头中缺失的「الحالة」和「عرض التفاصيل」列内容

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