无法重新初始化数据表

Question

Hi I'm having the below code where I load the datatable on a click of the button

$("#search").click(function () {
         // alert("Video inside");
        
            //$("#Video_Details").dataTable().fnDestroy();
          console.log(lat);
          $("#Video_Details").DataTable({

            // // Ajax for api call
            ajax: {
              //   // api endpoint uri
              //urlString: "http://localhost:8080/xx/xx/xx/xx/xx",
              url: url,
              type: "GET",
              data: function (json) {
                console.log(json);
                return json;
              },
            },

When I click the second time I'm getting cannot reinitialize error. Can someone please clarify?

Answer 1

The simplest solution is to use the DataTables retrieve option:

"retrieve": true

From the documentation:

if the table has already been initialised, this parameter will cause DataTables to simply return the object that has already been set up

The reason you get this error is because the DataTable( {...} ) function actually creates and initializes the DataTable - and you can only do this once for each table.

---

One alternative is to use the destroy option - but that is a relatively expensive operation if you are not actually changing any of the initialization options each time you click your button.

---

Another alternative is to create and initialize the table outside of the button click, and assign it to a variable:

$(document).ready(function() {

  var table = $('#example').DataTable( {
    ...
  } );

} );

Now you can use the table variable. This approach means that the table will be initialized and displayed before the first click of the button - which may not be what you want.