如何仅调用一次DataTables JS？标签页切换时表格加载函数重复调用求助

这种标签页切换时DataTables初始化函数被重复调用的问题我碰到过好多次，给你梳理几个最常见的原因和对应的解决办法，应该能帮你定位问题：

1. 标签页切换事件被重复绑定 #

很多标签页组件（比如Bootstrap Tab）会有多个切换相关的事件，而且如果你的事件绑定代码被执行了多次（比如不小心放在了会重复触发的回调里），就会导致每次切换标签页时，初始化函数被调用多次。

举个例子，如果你的事件绑定代码是这样的：

// 错误示例：如果这段代码被执行多次，就会重复绑定事件
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  deletedTesters();
});

每次这段代码执行，就会给标签页切换事件多绑定一次deletedTesters调用，最终导致多次触发。

解决办法：

• 绑定事件前先解绑，避免重复绑定：

$('a[data-toggle="tab"]').off('shown.bs.tab').on('shown.bs.tab', function (e) {
  // 额外加个判断，只在切换到目标标签页时才调用初始化
  if ($(e.target).attr('href') === '#对应table3的标签页ID') {
    deletedTesters();
  }
});

• 同时确保这段事件绑定代码只执行一次（比如放在$(document).ready()里，且页面只加载一次这个脚本）。

2. DataTables初始化的判断逻辑不够可靠 #

看你现有的deletedTesters函数里，用typeof table3 == 'undefined'来避免重复初始化，但这个判断很容易失效——比如table3变量在其他地方被意外重置、或者你用了dataTable()（返回jQuery对象）而不是DataTable()（返回DataTables实例），都会导致判断出错，让函数再次执行初始化。

优化初始化逻辑：
改用DataTables官方提供的API来判断表格是否已经初始化，这个方法更可靠：

function deletedTesters() {
  const $table = $('#testers-table3');
  // 用isDataTable判断表格是否已初始化
  if (!$.fn.DataTable.isDataTable($table)) {
    table3 = $table.DataTable({
      'processing': true,
      'serverSide': true,
      'deferRender': true,
      'autoWidth': false,
      'ajax': {
        'dataType': 'json',
        'type': 'POST',
        // 注意：不要手动设置draw参数，DataTables会自动管理这个值
        // 'draw': 1,
        'async': true, // 确保异步请求设置正确
        'url': '你的接口地址' // 补充完整的AJAX接口地址
      },
      // 其他表格配置项...
    });
  }
}

3. 标签页内容被重复渲染 #

如果你的标签页对应的内容（比如表格所在的<div>）被动态生成了多次，或者标签页组件在切换时会重新加载内容，就会导致#testers-table3这个选择器匹配到多个元素，或者每次切换都触发一次初始化逻辑。

解决办法：

• 确保表格的DOM元素在页面加载时就已经存在，且只存在一个，不要在切换标签页时重复生成表格DOM。
• 如果是动态加载标签页内容，只在内容第一次加载完成后调用一次初始化函数。

4. AJAX配置的潜在问题 #

你原来的AJAX配置里写了'draw': 1，这个参数应该由DataTables自动管理，手动硬写固定值可能导致重复请求。另外如果async被设置为false，同步请求可能会打乱事件触发的顺序，间接导致重复调用。

修正AJAX配置：
移除手动设置的draw参数，让DataTables自动处理：

'ajax': {
  'dataType': 'json',
  'type': 'POST',
  'async': true,
  'url': '你的接口地址',
  // 如果需要传递自定义参数，用data回调
  'data': function(d) {
    // 比如添加自定义查询条件：d.status = 'deleted';
  }
}

按照上面的步骤排查，应该就能找到函数被重复调用的原因并解决问题啦。

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