How to redraw DataTable with new json data
<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>