如何用新的json數據重繪DataTable

我正在使用jquery數據表，並且我被卡在將新數據加載到數據表和重繪中。我有以下代碼片段。如何用新的json數據重繪DataTable

首次DataTable的初始化

var myDataTable=$('#patient_data').DataTable({ 
       searching: false, 
       "ajax": { 
        "url": "process/get-patient-search.php", 
        "type": "POST", 
        data: { 
         "clinic": <?php echo $clinicID ?> 
        }, 
        '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 '<button id="' + data+ '" onClick="getMoreInfo('+data+');" class="moreInfo"><i class="fa fa-info-circle"></i></button>'; 
        } 
       }] 

      });<br>

初始響應從服務器

[{"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" 
}]

它正常工作爲先。但我需要根據用戶查詢搜索獲取新數據。當我重新繪製表格上面說的是

數據表警告：表ID = patient_data - 請求的未知參數「detail_id」爲0行有關此錯誤的詳細信息，請參閱http://datatables.net/tn/4

我重繪代碼段

$("#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; 
      }

服務器響應

[{"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" 
}]

我知道這個問題已經被問，我一直整天搜索，但沒有答案的解決我的問題。我嘗試了每個論壇，包括堆棧流和數據表論壇。我經歷了所有的問題，並搜尋了每一個可能的答案，並嘗試了所有的事情，但沒有解決我的問題。我真的需要幫助。我不知道我的代碼有什麼問題。

來源

2016-09-20 Arshad

這是服務器端？我假設如此，但在初始化代碼中沒有''serverSide「：true'。另外，你沒有使用API進行搜索，你正在做一個單獨的Ajax調用並試圖填充數據表。這無疑是你出錯的地方。 – markpsmith

我認爲初始數據格式和後面的數據格式是不同的。請將初始數據添加到數據表 –

親愛的Markpsmith我正在用不是來自服務器端的新數據填充數據表我已經在客戶端配置了數據表，並且只需要插入新數據。有人提出來自服務器的反應是問題在數據複製中引發的問題。它說在問題中提供的警告。數據是json格式，每件事情都應該沒問題。但不知道那是什麼錯誤。它只是在數據表中插入新數據，沒有服務器端處理。 – Arshad

我想我自己找到了答案。 修訂的DataTable重繪代碼段

$("#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) 

          myDataTable.clear(); 
          myDataTable.rows.add(JSON.parse(response)); 
          myDataTable.draw(); 

         }else{ 

          $('.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; 
      }

來源

2016-09-20 17:47:22 Arshad

如何用新的json數據重繪DataTable

回答

相關問題