title: How to redraw DataTable with new json data
body: <p>I am using jquery datatable and I am stuck at loading the new data to datatable and redraw. I have the following code Snippet. </p>
  
  <p><strong>First Time DataTable Initialization</strong> <br></p>
  
  <pre><code>var myDataTable=$('#patient_data').DataTable({ 
                  searching: false,
                  "ajax": {
                      "url": "process/get-patient-search.php",
                      "type": "POST",
                      data: {
                          "clinic": &lt;?php echo $clinicID ?&gt;
                      },
                      'dataSrc':function (data){
                          return data;
                      }
                  },
                  "columns": [
                      { "data": "detail_id" },
                      { "data": "fname" },
                      { "data": "surname" },
                      { "data": "dentist" ,
                          "className":"hidden-xs"
                      },
                      { "data": "clinic_name" ,
                          "className":"hidden-xs"
                      },
                      { "data": "speciality" ,
                          "className":"hidden-xs"
                      },
                      { "data": "date_registered" ,
                          "className":"hidden-xs",
                      },
                      { "data": "detail_id" }
                  ],
                  "aoColumnDefs": [{
                      "aTargets": [7],
                       'searchable': false,
                       'orderable': false,
                       'className':'center',
                       'mRender': function (data, type, full, meta){
                           return '&lt;button id="' + data+ '" onClick="getMoreInfo('+data+');" class="moreInfo"&gt;&lt;i class="fa fa-info-circle"&gt;&lt;/i&gt;&lt;/button&gt;';
                       }
                  }]
  
              });&lt;br&gt;
  </code></pre>
  
  <p><strong>Initial Response From Server</strong><br></p>
  
  <pre><code>[{"detail_id":"1",
    "fname":"Hakim",
    "surname":"Ali",
    "dentist":"Ariya Stark",
    "clinic_name":"Doctor ",
    "speciality":"O",
    "date_registered":"13\/02\/16"
   },
   {"detail_id":"2",
    "fname":"Maria",
    "surname":"Arshad",
    "dentist":"Ariya Stark",
    "clinic_name":"Doctor ",
    "speciality":"O",
    "date_registered":"13\/02\/16"
   }]
  </code></pre>
  
  <p><br>
  It works fine for the first. but I need to fetch the new data based on the user query search. And When I redraw the table It says that the </p>
  
  <blockquote>
    <p>DataTables warning: table id=patient_data - Requested unknown parameter 'detail_id' for row 0. For more information about this error, please see <a href="http://datatables.net/tn/4" rel="nofollow">http://datatables.net/tn/4</a><br></p>
  </blockquote>
  
  <p><strong>My Redraw Code Snippet</strong><br></p>
  
  <pre><code>$("#search_submit").on('click',function(){
                  if (search_patient.valid()) {
                      $('.errorHandler').fadeOut();
                      $.post('process/process-patient-search.php',$('#patient-search-form').serialize(), function(response){
                          if(isJson(response)){//isJson(response)
                              alert("data is json");
                              alert(response);
                              /* myDataTable.clear();
                              myDataTable.rows.add(response);
                              myDataTable.draw(); */
                              myDataTable.clear().draw();
                              myDataTable.rows.add(response); // Add new data
                              myDataTable.columns.adjust().draw();
                          }else{
                              alert(response);
                              /* 
                              $('.errorHandler').html('');
                              $('.errorHandler').html(response);
                              $('.errorHandler').fadeIn("slow");
                              $('.errorHandler').fadeOut(2000); */
                          }
                      });
                  } else {
                      //alert('form is not valid');
                  }
  
              });
              function isJson(str) {
                  try {
                      JSON.parse(str);
                  } catch (e) {
                      return false;
                  }
                  return true;
              }
  </code></pre>
  
  <p><br>
  <strong>Server Response</strong><br></p>
  
  <pre><code>[{"detail_id":"66",
   "fname":"Waseem",
   "surname":"Akram",
   "dentist":"Ariya Stark",
   "status":"1",
   "clinic_name":"Doctor ",
   "speciality":"S",
   "date_registered":"15\/09\/16"
  },
  {"detail_id":"67",
   "fname":"Waseem",
   "surname":"Akram",
   "dentist":"Ariya Stark",
   "status":"1",
   "clinic_name":"Doctor ",
   "speciality":"S",
   "date_registered":"15\/09\/16"
  },
  {"detail_id":"69",
   "fname":"Waseem",
   "surname":"Akram",
   "dentist":"Ariya Stark",
   "status":"1",
   "clinic_name":"Doctor ",
   "speciality":"S",
   "date_registered":"15\/09\/16"
   }]
  </code></pre>
  
  <p><br>
  I know that this question has already been asked and I have been searching all the day but none of the answer solved my problem. I tried every forum including the stack over flow and datatable forum.
  I went through all the question and searched every possible answer and tried every thing but nothing solved my problem. I really need help with this. I don't know what is wrong with my code. </p>