用两个函数初始化相同的数据表

Question

我的数据表脚本中有两个函数（load_data 和 fetch_data）。它们都使用不同的 ajax 调用。

我的表（名称：product_data）和脚本按预期工作，但在加载第一页时会显示此错误消息：

“DataTables 警告：表 id=product_data - 无法重新初始化 数据表”

我认为出现此错误是因为我将这两个函数合并到一个脚本中时出现了错误。你能帮我这两个函数如何正确初始化我的表“product_data”吗？

$(document).ready(function() {
 
  // Start Function 1
 
  load_data();
 
  function load_data(is_category) {
    var dataTable = $('#product_data').DataTable({
      "processing": true,
      "serverSide": true,
      "sDom": "rtipl",
      "order": [],
      "ajax": {
        url: "fetch.php",
        type: "POST",
        data: {
          is_category: is_category
        }
      },
      "columnDefs": [{
        "targets": [2],
        "orderable": false,
      }, ],
    });
  }
 
  // Script for Function 1 //
 
  $(document).on('change', '#category', function() {
    var category = $(this).val();
    $('#product_data').DataTable().destroy();
    if (category != '') {
      load_data(category);
    } else {
      load_data();
    }
  });
 
 
  // Start Function 2
 
  fetch_data('no');
 
  function fetch_data(is_date_search, start_date = '', end_date = '') {
    var dataTable = $('#product_data').DataTable({
      "processing": true,
      "serverSide": true,
      "order": [],
      "ajax": {
        url: "fetch.php",
        type: "POST",
        data: {
          is_date_search: is_date_search,
          start_date: start_date,
          end_date: end_date
        }
      }
    });
  }
 
  // Script for Function 2 //
 
  $('#search').click(function() {
    var start_date = $('#start_date').val();
    var end_date = $('#end_date').val();
    if (start_date != '' && end_date != '') {
      $('#product_data').DataTable().destroy();
      fetch_data('yes', start_date, end_date);
    } else {
      alert("Both Date is Required");
    }
 
  });
 
  // Search Field
 
  var datatable = $('#product_data').DataTable();
  $('#searchfield').on('keyup', function() {
    datatable.search(this.value).draw();
  });
 
});

fetch.php 的一部分

...

if($_POST["is_date_search"] == "yes")
{
    $query .= 'order_id BETWEEN "'.$_POST["start_date"].'" AND "'.$_POST["end_date"].'" AND ';
}

if(isset($_POST["is_category"]))
{
    $query .= "order_item = '".$_POST["is_category"]."' AND ";
}

...

Answer 1

在 backebd i,e fetch.php 你可能有验证 比如检查 start_date,end_date 是否存在 检查 is_category 是否存在并仅获取有效的帖子数据

$(document).ready(function() {

  // Start Function 1
  function load_data() {

  //first recive all inputs here 
   let is_category = $("#category").val();
   let start_date = $('#start_date').val();
   let end_date = $('#end_date').val();


  //at the backebd i,e fetch.php you may have validations
  //i.e start_date,end_date exist or not
  //is_category exist or not


  //and initialise datatables once only
    var dataTable = $('#product_data').DataTable({
      "processing": true,
      "serverSide": true,
      "sDom": "rtipl",
      "order": [],
      "ajax": {
        url: "fetch.php",
        type: "POST",
        data: {
          is_category: is_category,
          start_date: start_date,
          end_date: end_date
        }
      },
      "columnDefs": [{
        "targets": [2],
        "orderable": false,
      }, ],
    });
  }
  
  //calling the function on document load
  load_data();


  $(document).on('change', '#category', function() {
      $('#product_data').DataTable().destroy();
      load_data();
  });

  $('#search').click(function() {
  
    if (start_date != '' && end_date != '') {
      $('#product_data').DataTable().destroy();
      load_data();
    } else {
      alert("Both Date is Required");
    }
  });

  // Search Field
  var datatable = $('#product_data').DataTable();
  $('#searchfield').on('keyup', function() {
    datatable.search(this.value).draw();
  });
  
  })