jQuery点击切换表格：提交后清除旧数据显示新表格

我看了你的代码，问题出在这两个地方：一是每次点击提交都会重复初始化DataTable实例，二是切换类型时没有把另一个表格隐藏起来，导致两个表格的内容同时显示在页面上。下面是具体的修复方案：

核心修改点 #

• 切换类型时先隐藏所有相关表格，只显示当前选中类型对应的表格
• 初始化DataTable前，先检查是否已有该表格的DataTable实例，如果有就销毁后再重建（或者直接复用实例更新数据，更高效）

修改后的完整代码 #

HTML部分（调整表格初始状态） #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-head">Generate Reports</div>
<form name="eway_reports_form" method="POST" action="#" onsubmit="return false;">
  <div class="row">
    <div class="col-sm-2">
      <select name="transaction_type" id="transaction_type" class="form-control" required>
        <option value="">Select Type</option>
        <option value="eway_inward">Inward</option>
        <option value="eway_outward">Outward</option>
      </select>
    </div>
    <div class="col-sm-3">
      <select name="report_type" id="report_type" class="form-control" required>
        <option value="">Select Report Type</option>
        <option value="cancelled_eway">Cancelled E-Way </option>
      </select>
    </div>
    <div class="col-sm-1">
      <button id="reportbtn" class="btn btn-success" type="submit">Submit</button>
    </div>
  </div>
</form>
<div class="table" id="reports_list_cont2" style="display:none;overflow:auto;">
  <!-- 初始隐藏两个表格，避免默认显示 -->
  <table id="cancelled_bill_eway_outward" class="table table-hover table-bordered" cellspacing="0" width="100%" style="display:none;">
    <thead>
      <tr>
        <th>EwaybillNo</th>
        <th>EBill Date</th>
        <th>Transaction Type</th>
        <th>Document type</th>
        <th>Document No</th>
        <th>Document date</th>
        <th>Bill from GSTIN</th>
        <th>Bill from Companyname</th>
        <th>Bill to GSTIN.</th>
        <th>Bill to company name</th>
        <th>TransporterId</th>
        <th>TransporterName</th>
        <th>Dispatch From Address</th>
        <th>Ship To Address </th>
        <th>Quantity</th>
        <th>HSN Code</th>
        <th>Total Invoice Value</th>
        <th>Valid Till Date</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
  <table id="cancelled_bill_eway_inward" class="table table-hover table-bordered" cellspacing="0" width="100%" style="display:none;"></table>
</div>

JavaScript部分（关键逻辑修复） #

$("#reportbtn").on("click", function() {
  jc.open();
  $("#reports_list_cont2").show();
  
  var transaction_type = $("#transaction_type").val();
  var report_type = $('#report_type').val();
  var tableId = "#cancelled_bill_" + transaction_type;
  // 计算另一个表格的ID，用于隐藏和清理
  var otherTableId = transaction_type === "eway_outward" ? "#cancelled_bill_eway_inward" : "#cancelled_bill_eway_outward";

  // 1. 处理旧表格：隐藏、销毁实例、清空内容
  $(otherTableId).hide();
  if ($.fn.DataTable.isDataTable(otherTableId)) {
    $(otherTableId).DataTable().destroy();
    $(otherTableId).empty();
  }

  // 2. 显示当前要使用的表格
  $(tableId).show();

  // 3. 初始化或复用当前表格的DataTable实例
  var Table;
  if ($.fn.DataTable.isDataTable(tableId)) {
    Table = $(tableId).DataTable();
    Table.clear(); // 清空已有数据
  } else {
    Table = $(tableId).DataTable({
      data: [],
      columns: [{
        "data": "ebillno"
      }, {
        "data": "ebilldate"
      }, {
        "data": "Transactiontype"
      }, {
        "data": "doctype"
      }, {
        "data": "docno"
      }, {
        "data": "docdate"
      }, {
        "data": "billfromgstin"
      }, {
        "data": "billfromcompany"
      }, {
        "data": "billtogstin"
      }, {
        "data": "billtocompany"
      }, {
        "data": "transpoter_id"
      }, {
        "data": "transpoter_name"
      }, {
        "data": "despatchfromaddress"
      }, {
        "data": "shiptoaddress"
      }, {
        "data": "quantity"
      }, {
        "data": "hsncode"
      }, {
        "data": "taxinvoicevalue"
      }, {
        "data": "validupto"
      }, {
        "data": "status"
      }],
      rowCallback: function(row, data) {},
      Filter: false,
      Sort: false,
      JQueryUI: false,
      AutoWidth: false,
      LengthChange: false,
      Processing: true,
      ServerSide: false, // 这里改为false，因为你是客户端加载全部数据，不是服务器端分页
      dom: 'Bfrtip',
      searching: false
    });
  }

  // 4. 发送AJAX请求加载新数据
  $.ajax({
    url: url + 'ajax/get_cancelled_invoice_details',
    type: "post",
    dataType: 'json',
    data: {
      'transaction_type': transaction_type,
      'report_type': report_type
    }
  }).done(function(result) {
    Table.rows.add(result).draw(); // 添加新数据并渲染表格
    jc.close();
  }).fail(function(jqXHR, textStatus, errorThrown) {
    jc.close();
    alert('数据加载失败：' + textStatus); // 添加错误提示，提升用户体验
  });
});

额外说明 #

• 我把ServerSide参数改成了false，因为你是通过AJAX获取全部数据后手动添加到表格，不是服务器端分页模式，开启ServerSide会导致DataTable重复请求服务器，引发异常。
• 每次切换类型时，不仅隐藏旧表格，还销毁它的DataTable实例并清空内容，避免内存泄漏和残留数据。
• 复用当前表格的DataTable实例，比每次重新初始化更高效，也能避免重复绑定事件的问题。

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