Question

我有一个表单，您可以使用该表单选择类型。基于这种类型，我在表格中显示数据。

现在我想要的是当我选择第一种类型并单击数据显示在表格中的提交按钮时。

当我选择第二个并单击提交按钮时，数据正在显示，但之前的数据也会显示在那里。如何在创建新表之前删除上一个表？

请先帮助我。

这是我的HTML：

＆＃13;

$("#reportbtn").on("click", function() {
  jc.open();
  $("#reports_list_cont2").show();
  var transaction_type, report_type;
  transaction_type = $("#transaction_type").val();
  report_type = $('#report_type').val();
  var Table = $("#reports_list_cont2 #cancelled_bill_" + transaction_type).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: true,
    dom: 'Bfrtip',
    searching: false
  });

  $.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.clear().draw();
    Table.rows.add(result).draw();
    jc.close();
  }).fail(function(jqXHR, textStatus, errorThrown) {
    // needs to implement if it fails
  });
});

＆＃13;

<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%">
    <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%"></table>
</div>

＆＃13;

Answer 1

这是因为你在已经初始化的元素上初始化DataTable。

你可以在重新初始化之前简单地销毁它：
定义全局变量，您将其保存为已初始化的DataTable。比在click事件内而不是创建新变量只需使用此全局变量。

在if (table instanceof $.fn.dataTable.Api) { table.destroy(); }事件中检查您的变量是否为DataTable。如果它是毁灭它。

var table;
$("#reportbtn").on("click", function() {
  if (table instanceof $.fn.dataTable.Api) {
    table.destroy();
  }
  $("#reports_list_cont2").show();
  var transaction_type, report_type;
  transaction_type = $("#transaction_type").val();
  report_type = $('#report_type').val();
  table = $("#reports_list_cont2 #cancelled_bill_" + transaction_type).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: true,
    dom: 'Bfrtip',
    searching: false
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>

<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%">
    <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%"></table>
</div>

"submedium": "CALL",

隐藏上一个表并在jQuery中单击时显示新表

1 个答案: