title: DataTable not populating - instead regular api response
body: <p>i have been trying to populate a reponsive dataTable with the result of an axaj call. However when i submit the request i receive a blank page with only the reponse entities.</p>
  
  <p>Here is my bean that i retrieve after the api has done it's job:</p>
  
  <pre><code>  private String validator;
    private String validThrough;
    private String creator;
    private String createdOn;
    private String profile;
    private String token;
    private String profileType;
    private String status;
  </code></pre>
  
  <p>And this is my ajax call:</p>
  
  <pre><code>$(document).ready(function () {
      var form = $('.smart-form');
      var counter = 0;
     form.submit(function (e) {
         if (counter != 0) {
             $("#datatable_col_reorder").dataTable().fnDestroy();
             counter++;
         }
         e.preventDefault();
         $.ajax ( {
             url: form.attr('action'), dataSrc: "", "data": {
                 "validator": $('#searchValidator').val(),
                 "validFrom": $('#searchValidFrom').val(),
                 "validTo": $('#searchValidTo').val(),
                 "creator": $('#searchCreator').val()
                 "createdOn": $('#searchCreatedOn').val()
                 "profile": $('#searchProfile').val()
                 "token": $('#searchToken').val()
                 "profileType": $('#searchSelectType').val()
             },
             success: function (data) 
             {
              jQuery.noConflict();
                 var table =$('#datatable_col_reorder').DataTable ( {
                     data:data,
                     columns: [
                         {"data": "validator"},
                         {"data": "validThrough"},
                         {"data": "creator"}, 
                         {"data": "createdOn"},
                         {"data": "profile"},
                         {"data": "token"},
                         {"data": "profileType"},
                         {"data": "status"}
                     ],
                    bDestroy: true
                 });
             }
         }); 
     });
      });
  </code></pre>
  
  <p>I just receive this:</p>
  
  <pre><code>[{"validator":"ЧъкНорис","validThrough":"2019-06-09 12:55:48.0-2019-06-09 12:55:48.0","creator":"ЧъкНорис","createdOn":"2019-06-09 12:55:48.0","profile":"ProfileAlumni","token":"QWERTYUI","profileType":"1","status":"Inactive"},{"validator":"ЧъкНорис","validThrough":"2019-06-09 12:55:48.0-2019-06-09 12:55:48.0","creator":"ЧъкНорис","createdOn":"2019-06-09 12:55:48.0","profile":"ProfileAlumni","token":"QWERTYUI","profileType":"1","status":"Inactive"}]
  </code></pre>
  
  <p>My page dissapears and i just have the response, which is not the behavior im looking for.
  I have checked whether the names of my reponse is the same as the table columns but this is not the problem.</p>
  
  <p>I checked all the selectors it's i believe they are all correct:</p>
  
  <pre><code>&lt;table id="datatable_col_reorder"
                              class="table table-striped table-bordered table-hover"
                              width="100%"&gt;
                              &lt;thead&gt;
                                  &lt;tr&gt;
                                      &lt;th&gt;validator&lt;/th&gt;
                                      &lt;th&gt;validThrough&lt;/th&gt;
                                      &lt;th&gt;creator&lt;/th&gt;
                                      &lt;th&gt;createdOn&lt;/th&gt;
                                      &lt;th&gt;profile&lt;/th&gt;
                                      &lt;th&gt;token&lt;/th&gt;
                                      &lt;th&gt;profileType&lt;/th&gt;
                                      &lt;th&gt;status&lt;/th&gt;
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody&gt;
                              &lt;/tbody&gt;
                          &lt;/table&gt;
  </code></pre>