如何在初始化AJAX DataTables时获取表格ID以指定数据源？

这个问题我之前也碰到过！核心原因是你在ajax配置里用的this根本不是指向表格DOM元素，而是DataTables的ajax配置对象本身，所以this.id或者$(this).attr('id')自然会返回undefined。下面给你几个实用的解决办法：

1. 提前存储表格对象（单表格场景） #

先把要初始化的表格jQuery对象存到变量里，之后在配置里直接用这个变量获取ID就行，非常直观：

$(document).ready(function() {
  // 先获取表格对象并存储
  const $table = $('#example');
  $table.DataTable({
    "ajax": {
      // 直接用变量拼接URL
      "url": "www.example.com/load-" + $table.attr('id') + ".php"
    }
  });
});

如果是用统一的服务器脚本，通过GET参数传递ID的场景，同样可以用这个变量：

$(document).ready(function() {
  const $table = $('#example');
  $table.DataTable({
    "ajax": {
      url: "www.example.com/load-table.php",
      data: function(d) {
        // 向请求参数里添加表格ID
        d.tableId = $table.attr('id');
      }
    }
  });
});

2. 通用初始化函数（多表格场景） #

如果要批量初始化所有AJAX DataTables，可以给需要初始化的表格加一个统一的class（比如.ajax-datatable），然后遍历每个表格进行处理：

$(document).ready(function() {
  // 遍历所有带指定class的表格
  $('.ajax-datatable').each(function() {
    const $currentTable = $(this);
    $currentTable.DataTable({
      "ajax": {
        // 每个表格用自己的ID拼接URL
        url: "www.example.com/load-" + $currentTable.attr('id') + ".php",
        // 或者用统一接口传参：
        // url: "www.example.com/load-table.php",
        // data: function(d) {
        //   d.tableId = $currentTable.attr('id');
        // }
      },
      // 其他通用配置比如分页、排序等都可以放在这里
      "paging": true,
      "searching": true
    });
  });
});

这样不管你页面里有多少个需要初始化的DataTables，只要给它们加上.ajax-datatable类，就能自动完成初始化，并且每个表格都会带上自己的ID请求对应的数据。

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