Getting error DataTables warning: table id=dataxxx - Cannot reinitialise DataTable.

deep007

I have tried to find many ways.Also I am looking for solution since last week. So finally decided to ask here may be somebody can help me Where I am doing wrong..

So Code is like this..

When User change the value of drop down on that time I have put on change function.So ajax code is like this

[CODE]

<script type="text/javascript">
        function OnselectionChangge(table_te){
            //alert(table_te);

            $.ajax({

                type: 'POST',
                url: 'changeTeam2.php',
                data: 'emp_teX='+table_te,
                success: function(outdata){
                    alert(outdata);
                    $('#dataxxx').DataTable({
                    
                        "ajax": 'tabdata.json',
                        "dataSrc": "data",
                        "bRetrieve": 'true',
                                                 aoColumns": [
                        { "ID": "ID" },
                        { "ca_nm": "Candidate" },
                        { "ma_nm": "Manager" }
                        ]

                    });
        
                }
            });
            
        }
    </script>  

[/CODE]
And here is tabdata.json file which have the data like this:
[DATA]

{"data":[{"ID":"1","ca_nm":"Candidate1 test","ma_nm":"Deep Bhatt"},{"ID":"2","ca_nm":"Candidate2 test","ma_nm":"Deep Bhatt"},{"ID":"3","ca_nm":"Candidate3 test","ma_nm":"Deep Bhatt"}]}

[/DATA]

colin

Hi deep007,

When you call DataTables with options ( {} ), as you are on line 12, that initialises the table, and as the error says, this can only be done once. The problem is that you're re-initialising the table every time the change occurs.

The fix is to either move the initialisation out of the change function, or to keep a flag so that you know if it's been initialised already.

Cheers,

Colin

deep007

Hey Colin,
Thanks for response.I got the problem but I have to keep that code insde onchage function only as whenever the select(drop down) option get change it take new value from tabdata.json and print it into datatable..
Can you please help me with any code or edit my code to fix this problem?
Or give me any reference link for this ?

colin

Hi again,

A simple fix, on line 12 would be to test to see if the table has been initialised:

  if (!$.fn.DataTable.isDataTable('#dataxxx')) {
    $('#dataxxx').DataTable({

        "ajax": 'tabdata.json',
        "dataSrc": "data",
        "bRetrieve": 'true',
        aoColumns ": [ {
          "ID": "ID"
        },
        {
          "ca_nm": "Candidate"
        },
        {
          "ma_nm": "Manager"
        }
      ]

    });
  }

deep007

Hey colin,
Thanks for the response.
Did the change like you suggest but still it's not work.

    `<script type="text/javascript">
    function OnselectionChangge(table_te){
        //alert(table_te);
                    $.ajax({
                             type: 'POST',
            url: 'changeTeam2.php',
            data: 'emp_teX='+table_te,
            success: function(outdata){
                //alert(outdata);
                if (!$.fn.DataTable.isDataTable('#dataxxx')) {
                $('#dataxxx').DataTable({

                    "ajax": 'tabdata.json',
                    "dataSrc": "data",
                    "bRetrieve": 'true',
                    "aoColumns": [ {
                    "ID": "ID"
                    },
                     {
                     "ca_nm": "Candidate"
                     },
                    {
                    "ma_nm": "Manager"
                     }
                    ]
                });

            }
        }
        });

    }
</script>`

colin

Hey, when you say "still it's not work", do you mean that you get the re-initialisation error as you did before? If so, I'd search your code for other places where you're initialising the table and add that check we did earlier.

C

deep007

hey,
No now I am not getting a single error..but still not able to retrieve that data into datatable. Thanks colin.

colin

OK, without seeing the code it's hard to know what to suggest, but the table may just need a draw. So, on that if statement we added yesterday, if the table is initialised (it needs an else on line 28), try adding the line:

$('#dataxxx').DataTable().draw();

allan

I don't understand why you are initialising the DataTable inside your Ajax success handler. There doesn't appear to be anything in the success handler that needs to be there rather than somewhere else.

We'd really need a link to a test page showing the issue to fully understand the problem. As Colin suggests, we are missing something at the moment and its difficult to know what without seeing the full thing.

Allan

deep007

Hey allan,colin

Thank you for response.
Ok let me explain....

I am trying to access a database using a on dropdown on-change function. Then, trying to store that data into one .json file. I want to retrieve that data into a DataTable without refreshing the current page. Right now, When I change the value of dropdown by selecting one option from it this ajax function take that variable to other page the I am passing that variable to the query using and getting the desired result and storing that output data into tabdata.json file. Now What I want is, I want to set that json file data into datatable. Every time the value of dropdown get change datatable's data must get populate according to it.

Issue:not able to store json file's data into the DataTable.

here is the Sample data Which get stored into json file.(tabdata.json)

    {"data":[{"ID":"1","ca_nm":"Candidate1 test","ma_nm":"Deep Bhatt"},
    {"ID":"2","ca_nm":"Candidate2 test","ma_nm":"Deep Bhatt"},
    {"ID":"3","ca_nm":"Candidate3 test","ma_nm":"Deep Bhatt"}]

Here is the code from which the data is stored into the json file.(file: passing.php)

     $vi_tab = $_POST['emp_teX'];
      if($vi_tab=='1'){
       $array_return = array();
      $query1 = mysqli_query($conn,"SELECT id,name,mana_name FROM sales 
       ORDER BY id ASC");
        while($rows = mysqli_fetch_array($query1))
       {
        $pass_array['ID'] = $rows['id'];
        $pass_array['ca_nm'] = $rows['name'];
        $pass_array['ma_nm'] = $rows['mana_name'];
        array_push($array_return, $pass_array);
        }


        $changetab = fopen('tabdata.json', 'w');
         fwrite($changetab, '{"data":');
         fwrite($changetab, json_encode($array_return));
         fwrite($changetab, "}");
          fclose($changetab);
          }

This is the ajax function:(Datatablee.php)

           <script type="text/javascript">
           function OnselectionChangge(table_te){
           $.ajax({
           type: 'POST',
           url: 'changeTeam2.php',
           data: 'emp_teX='+table_te,
          datatype: 'JSON',
          success: function(outdata){
            //alert(outdata);
            if (!$.fn.DataTable.isDataTable('#dataxxx')) {
            $('#dataxxx').DataTable({

                "ajax": 'tabdata.json',
                "dataSrc": "data",
                "bRetrieve": 'true',
                "destroy": "true",
                "searching": "false",
                "aoColumns": [ {
                "ID": "ID"
                },
                 {
                 "ca_nm": "Candidate"
                 },
                {
                "ma_nm": "Manager"
                 }
                ]
            });

            }
          }
       });

    }
</script>

Here is the code of the drop down,(Datatablee.php)

        <select id="tea" name="tea" 
         onchange="OnselectionChangge(this.value)" required>
                <option value="">Select One Team</option>
                <option value="1">Team One</option>
                <option value="2">Team two</option>
                <option value="3">Team three</option>

            </select>

deep007

hey colin..
perhaps I got one thing but it doesn't seems right to do..
if i call this in ajax ** location.reload(true);** that thing work as I want..

allan

Create your DataTable just once (outside of your Ajax handler) and use clear() and then rows.add() to add in the new data which you would retrieve via Ajax. That way the same table gets reused, you just load it up with different data as needed.

Allan

deep007

Hey Allan,

Thank you for your response. I have initialize the table in this way..

      <script>
    var table;
    $(document).ready(function(){
         table = $('#dataxxx').DataTable();
        table.clear();
    }
</script>

Can you Please show me where should I call clear() and rows.add()?
in above code?

deep007

Hey colin,

Thank you for your response.I tried that else part And now its giving me new error

          http://datatables.net/tn/4

this one.Working on it.

allan

Yes, inside your success callback function (line 9 for example).

亮哥哥

Clear the table data before calling back

亮哥哥

$("#main_table").dataTable().fnDestroy();
loadTable();

function loadTable() {

    $('#main_table').DataTable({

        // code

    })

}