jquery - DataTable Warning - Can not reinitiliaze DataTable -

i trying initialize datatable on ajax success. works fine first time won't work again unless refresh page.

js function:

this.summaryreport = function()     {       crsf = $("input[name=csrftestname]").val();       searchclients = $("#searchclients").val();       $('#loadingmessage').show();       $.ajax({         url: url+"query_report_summary",         type: "post",         cache: false,         data: {"csrftestname": crsf, searchclients: searchclients},         success: function(query_result)         {           var data = $.parsejson(query_result);           $('#example').datatable( {             data: data,             columns: [             { data: "name" },             { data: "location" },             { data: "source" },             { data: "contact" },             { data: "number" },             { data: "status" }             ]           } );           self.reportsummary(data);         },         complete: function()         {           $("#reportsummaryform")[0].reset();           $('#loadingmessage').hide();         }       });     } 

error getting - datatable warning - can not reinitialize datatable.

html:

<form role="form" class="" id="reportsummaryform">             <input type="hidden" name="<?php echo $this->security->get_csrf_token_name(); ?>" value="<?php echo $this->security->get_csrf_hash(); ?>">             <div class="input-group input-group-sm">                 <input class="form-control input-sm" type="text" id="searchclients" name="searchclients" placeholder="">                 <span class="input-group-btn">                     <button type="button" class="btn btn-sm btn-primary" data-bind="click: summaryreport">search</button>                 </span>             </div>         </form>  <table id="example" class="display" width="100%"></table> 

create datatable upfront, in outer scope:

var table = $('#example').datatable( {   columns: [     { data: "name" },     { data: "location" },     { data: "source" },     { data: "contact" },     { data: "number" },     { data: "status" }   ] }); 

in summaryreport, clear() table , add() new rows, 1 one. below setting datatype conversion of response not needed. under assumption valid json in reponse holds array of items on form specified in columns :

$.ajax({   url: url+"query_report_summary",   type: "post",   cache: false,   data: {"csrftestname": crsf, searchclients: searchclients},   datatype: 'json',   success: function(data) {     table.clear()     data.foreach(function(row) {       table.row.add(row)     })     table.draw()   }   ... })