Initialise same datatable with two functions

Question

I have two functions (load_data and fetch_data) inside of my datatables script. They are both using different ajax calls.

My table (name: product_data) and the script is working as expected but this error message is shown with the first page load:

"DataTables warning: table id=product_data - Cannot reinitialise DataTable"

I think this error comes because I have a mistake in mergin these two functions together in one script. Could you help me how the two functions can initialise my table "product_data" correctly ?

$(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();
  });
 
});

part of 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 ";
}

...

you are calling load_data() and fetch_data('no'); one after another on document load and both are initializing the Datatable this is the reason you are getting this error — Sandeep Modak
– Sandeep Modak, Commented Oct 13, 2020 at 12:01
Thanks. What is an easy way to fix this? I mean both funtions needs to initiliase the datatable or not? — Lerster
– Lerster, Commented Oct 13, 2020 at 12:11

Sandeep Modak · Accepted Answer · 2020-10-13 12:37:21Z

1

At the backebd i,e fetch.php you may have validations like check if start_date,end_date exist or not check if is_category exist or not and fetch only for valid post data

$(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();
  });
  
  })

answered Oct 13, 2020 at 12:37

Sandeep Modak

8421 gold badge6 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lerster Over a year ago

Thank you for your help and sorry for the delayed answer. I check in the fetch.php with if($_POST["is_date_search"] == "yes") if this is available or not. Where do I have to add is_date_search in your code? I posted this part of the fetch.php in my starting post. Please have a look.

Sandeep Modak Over a year ago

Instead of checking if($_POST["is_date_search"] == "yes") check if start date and end date both set.

Collectives™ on Stack Overflow

Initialise same datatable with two functions

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related