如何为Angular 5 DataTables添加自定义参数？

嘿，我太懂你这种卡在DataTables自定义参数上的感觉了——serverSide模式下要额外传参数确实容易摸不着门路，不过你的代码方向已经对了，我来帮你把这个问题理顺！

前端Angular代码修改 #

你用的是函数式的ajax配置，这刚好是添加自定义参数的最佳方式。只需要在发送请求前，把你的自定义字段直接追加到DataTables自带的dataTablesParameters对象里就行，这个对象本来就包含分页、排序、搜索这些默认参数，我们直接加字段就好：

this.dtOptions = {
  pagingType: 'full_numbers',
  pageLength: 10,
  order: [0, 'desc'],
  serverSide: true,
  processing: true,
  ajax: (dataTablesParameters: any, callback) => {
    // 在这里插入你的自定义参数，比如用户ID、筛选条件这类
    dataTablesParameters.user_id = 123; // 示例参数1
    dataTablesParameters.filter_status = 'active'; // 示例参数2

    this.http
      .post<DataTablesResponse>(
        'http://localhost/api/webapi/',
        dataTablesParameters,
        {
          headers: new HttpHeaders({
            'Content-Type': 'application/json',
            'Authorization': 'token'
          })
        }
      ).subscribe((resp) => {
        // 把后端返回的数据传递给DataTables的回调函数
        callback({
          recordsTotal: resp.recordsTotal,
          recordsFiltered: resp.recordsFiltered,
          data: resp.data
        });
      });
  }
};

小优化建议： #

你之前用that捕获上下文其实没必要，把subscribe里的函数改成箭头函数，就能直接用this了，代码会更清爽~

后端PHP接收自定义参数 #

因为前端发的是JSON格式的POST请求，PHP没法直接用$_POST获取，得先读取原始请求体再解码：

// 获取原始POST数据
$rawRequest = file_get_contents("php://input");
// 解码成关联数组
$requestData = json_decode($rawRequest, true);

// 现在就能拿到你的自定义参数了
$targetUserId = $requestData['user_id'];
$targetStatus = $requestData['filter_status'];

// 同时也能拿到DataTables的默认参数，比如分页信息
$pageStart = $requestData['start'];
$pageSize = $requestData['length'];
// ... 接下来就是你的数据库查询、数据处理逻辑，最后返回符合DataTables格式的响应

避坑提醒 #

• 后端返回的响应必须严格包含recordsTotal（总数据量）、recordsFiltered（过滤后数据量）、data（当前页数据）这三个字段，不然DataTables会报错
• 如果自定义参数是动态变化的（比如从组件变量里取），要确保在ajax函数执行时能拿到最新值
• 一定要确认请求头的Content-Type是application/json，不然后端解码JSON会失败

这么改完之后，你的自定义参数就能顺利从Angular传到PHP后端啦！

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