DataTables warning: table id=example - Cannot reinitialise DataTable - jQuery

Question

In my project I am loading data to the data table from server side. First load is perfectly working fine. But when I change the <select> <option> value it is giving me an error.

I have a <select> <option> panel. So, once I change the option I need to remove current content and load different content to the table. I am getting data from ajax call and loading to the table. The second time when I change the option, it is giving me this error.

DataTables warning: table id=example - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

I checked the URL given but there is no good sound for me.

Here is my HTML,

<table id="example" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%" style="background:#f3f3f3">
    <thead>
        <tr>
            <th><div class="heading">Title 01</div></th>
            <th><div class="heading">Title 02</div></th>
            <th><div class="heading">Title 03</div></th>
            <th><div class="heading">Title 04</div></th>
            <th><div class="heading">Title 06</div></th>
            <th><div class="heading">Title 07</div></th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

Here is the select option dropdown

<select name="exampleSelect" id="exampleSelect" class="exampleSelect">
    <option id="exam1">value</option>
    <option id="exam2">value</option>
    <option id="exam3">value</option>
    <option id="exam4">value</option>
    <option id="exam5">value</option>
    <option id="exam6">value</option>
    <option id="exam7">value</option>
</select>

This is my on change function,

$('select#exampleSelect').on('change', function() {
    var sId = $(this).children(":selected").attr('id');
    loadedData(sId);
});

Here is my loadedData function

function loadedData(sId) {
    var table = $('#example').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "ajaxdata.json",
            "type": "POST"
        },
        "sScrollY": "300px",
        "scrollX":true,
        "paging": false,
        "bFilter": false,
        "bInfo": false,
        "searching": false,
        "bSort" : false,
        "fixedColumns":   true
    });
}

Here accroding to the "sId", loading data is changing

This is my JSON data,

{
    "draw": 1,
    "recordsTotal": 57,
    "recordsFiltered": 57,
    "data": [
        ["Airi", "Satou", "Accountant", "Tokyo", "28th Nov 08", "$162,700"],
        ["Angelica", "Ramos", "Chief Executive Officer (CEO)", "London", "9th Oct 09", "$1,200,000"],
        ["Ashton", "Cox", "Junior Technical Author", "San Francisco", "12th Jan 09", "$86,000"],
        ["Bradley", "Greer", "Software Engineer", "London", "13th Oct 12", "$132,000"],
        ["Brenden", "Wagner", "Software Engineer", "San Francisco", "7th Jun 11", "$206,850"],
        ["Brielle", "Williamson", "Integration Specialist", "New York", "2nd Dec 12", "$372,000"]
    ]
}

I need to append relevant data set to the tbody according to the select option changing value.

Is anyone have any experience regarding this to solve this out..?

Answer 1

Instead of trying to reinitializing the datatable, you can always send a parameter with your ajax request and force the datatable to refresh the data on demand

So your datatable initializing code will look something similar to the below code.

var table = $('#example').DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": {
        "url": "ajaxdata.json",
        "type": "POST",
        "data": function ( d ) {
            d.filtervalue = $(this).children(":selected").attr('id'); // Ofcourse you can change this parametername as you want or add more parameters.
        }
    },
    "sScrollY": "300px",
    "scrollX":true,
    "paging": false,
    "bFilter": false,
    "bInfo": false,
    "searching": false,
    "bSort" : false,
    "fixedColumns":   true
});

Your select change event will look something like below.

$('select#exampleSelect').on('change', function() {
    // Make sure that `table` variable is available inside your change method
    table.ajax.reload();
});

Answer 2

It shows that message because it's trying to initialize a datatable when there's already one for that table.

You could set an option to the initalization to destroy the datatable if it already exists (docs):

function loadedData(sId) {
    var table = $('#example').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "ajaxdata.json",
            "type": "POST"
        },
        "sScrollY": "300px",
        "scrollX":true,
        "paging": false,
        "bFilter": false,
        "bInfo": false,
        "searching": false,
        "bSort" : false,
        "fixedColumns":   true,
        "destroy": true
    });
}

But in my opinion, if you are able to, it is better to work with the datatables api and change the ajax source. You can use a parameter like @Cerlin Boss' answer, or if you want to change the url datatables has a ajax.url() method (docs). Suposing you have initialized your table elsewhere and saved it in a table variable:

$('select#exampleSelect').on('change', function() {
    var sId = $(this).children(":selected").attr('id');
    table.ajax.url( 'newData.json' ).load();
});