Laravel中如何通过Datatables AJAX渲染表格外统计数据

1. 后端控制器修改 #

在返回Datatables数据的同时，把性别统计值加入响应JSON中，确保统计是基于当前筛选（搜索、排序）后的数据集：

public function studentData()
{
    // 初始化查询构建器
    $query = Student::query();

    // 保留你已有的Datatables搜索、排序、分页处理逻辑
    // ...

    // 获取分页后的学生数据
    $students = $query->get();

    // 基于当前筛选条件统计男女生数量
    $totalMaleStudent = $query->where('gender', 'male')->count();
    $totalFemaleStudent = $query->where('gender', 'female')->count();

    // 返回包含数据和统计值的JSON响应
    return response()->json([
        'aaData' => $students,
        'totalMaleStudent' => $totalMaleStudent,
        'totalFemaleStudent' => $totalFemaleStudent
    ]);
}

2. 前端页面修改 #

在Datatables初始化代码中，通过ajax.complete回调解析响应结果，将统计值填充到对应span标签：

假设你的HTML标签结构：

<div class="stats">
    男生总数: <span id="totalMale"></span>
    女生总数: <span id="totalFemale"></span>
</div>
<table id="studentTable">
    <!-- 表格列定义 -->
</table>

Datatables初始化代码：

$(document).ready(function() {
    $('#studentTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('student.data') }}", // 替换为你的实际路由
            dataSrc: 'aaData', // 指定Datatables读取数据的字段
            complete: function(xhr) {
                // 解析响应JSON
                const response = JSON.parse(xhr.responseText);
                // 更新页面统计标签
                $('#totalMale').text(response.totalMaleStudent);
                $('#totalFemale').text(response.totalFemaleStudent);
            }
        },
        // 保留你已有的列配置
        columns: [
            // ...列定义
        ]
    });
});

补充说明 #

• 每次分页、搜索、排序触发AJAX请求时，complete回调都会执行，保证统计值和表格数据同步更新
• 如果你的AJAX请求是POST方法，需在ajax.data中携带CSRF Token：

  data: function(d) {
      d._token = "{{ csrf_token() }}";
  }
  

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