如何使用jQuery和DataTable动态获取表名传递AJAX请求参数

云上老周

2026-8-27

问题根因

ajax.data回调函数内的this默认指向ajax配置对象，而非当前正在初始化的表格DOM，所以直接写$(this).attr("data-table")无法获取目标属性
直接调用$('table.table').attr("data-table")时，jQuery匹配到多个符合选择器的元素时，默认只会返回第一个匹配元素的属性值，因此两个表格的请求都会拿到第一个表格的tableOne标识，出现参数串值

可行解决方案

方案1：遍历单个表格初始化（推荐）

遍历所有目标表格，逐个初始化DataTable实例，通过闭包提前缓存每个表格对应的自定义属性值，回调中直接读取缓存值即可，不存在上下文问题：

$('table.table').each(function () {
  // 缓存当前表格DOM和对应的标识
  const $table = $(this);
  const tableIdentify = $table.data('table'); // 等价于$table.attr('data-table')

  $table.DataTable({
    autoWidth: false,
    paging: true,
    info: true,
    responsive: true,
    filter: true,
    ajax: {
      url: base_url + "controller/action",
      type: "POST",
      data: function (d) {
        d.tableIdentify = tableIdentify;
      }
    },
    stateSave: true,
    processing: true,
    serverSide: true
  });
});

方案2：通过DataTable实例上下文获取当前表格DOM

如果不想改批量初始化的结构，可以在ajax.data回调中，通过当前上下文获取DataTable实例，再定位到对应的表格DOM读取属性：

$('table.table').DataTable({
  autoWidth: false,
  paging: true,
  info: true,
  responsive: true,
  filter: true,
  ajax: {
    url: base_url + "controller/action",
    type: "POST",
    data: function (d) {
      // 从当前上下文获取DataTable实例，再拿到对应的原生表格节点
      const currentTable = new $.fn.dataTable.Api(this).table().node();
      d.tableIdentify = $(currentTable).data('table');
    }
  },
  stateSave: true,
  processing: true,
  serverSide: true
});