我是否可以在每次单击选项卡时加载Jquery datatables插件数据

<div class="tab">
  <button class="tablinks" onclick="loadData('tab1')">选项卡1</button>
  <button class="tablinks" onclick="loadData('tab2')">选项卡2</button>
  <button class="tablinks" onclick="loadData('tab3')">选项卡3</button>
</div>

<div id="tab1" class="tabcontent">
  <!-- 这里显示选项卡1的内容 -->
</div>

<div id="tab2" class="tabcontent">
  <!-- 这里显示选项卡2的内容 -->
</div>

<div id="tab3" class="tabcontent">
  <!-- 这里显示选项卡3的内容 -->
</div>

function loadData(tabId) {
  // 隐藏所有选项卡内容
  $(".tabcontent").hide();
  
  // 显示当前选项卡内容
  $("#" + tabId).show();
  
  // 检查是否已经初始化了datatables插件
  if (!$.fn.DataTable.isDataTable("#" + tabId)) {
    // 使用AJAX请求获取数据
    $.ajax({
      url: "your_data_url", // 替换为您的数据源URL
      type: "GET",
      dataType: "json",
      success: function(data) {
        // 使用datatables插件初始化表格
        $("#" + tabId).DataTable({
          data: data,
          columns: [
            { title: "列1" },
            { title: "列2" },
            // 添加更多列...
          ]
        });
      },
      error: function() {
        console.log("加载数据失败");
      }
    });
  }
}