2016-09-20 3 views
0

jquery datatable을 사용하고 있으며 새 데이터를 datatable에로드하고 다시 그려야합니다. 다음 코드 스 니펫이 있습니다.
새 json 데이터로 DataTable을 다시 그리는 방법

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


그것은 첫째을 위해 잘 작동 서버에서

처음 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> 

초기 응답. 하지만 사용자 쿼리 검색을 기반으로 새 데이터를 가져와야합니다. 나는 테이블을 다시 그릴 때 그것은

DataTables 경고 말한다 : 테이블 ID = patient_data - 참조하시기 바랍니다 요청 알 수없는 매개 변수는이 오류에 대한 자세한 내용은 행 0에 대한 'detail_id'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" 
}] 


나는이 질문은 이미 요청 받았다 나는 모든 일을 검색되었지만 해답 중 누구도 내 문제를 해결 없다는 것을 알고있다. 나는 흐름과 datatable 공개 토론에 더미를 포함하여 각 공개 토론을 시도했다. 나는 모든 질문을 검토하고 모든 가능한 대답을 검색하고 모든 것을 시도했지만 아무것도 내 문제를 해결하지 못했습니다. 이 일에 정말로 도움이 필요해. 내 코드가 무엇이 잘못되었는지 알지 못합니다.

+0

이 서버 쪽인가를 개정? 그렇 겠지만 초기화 코드에는''serverSide ': true'가 없습니다. 또한 API를 사용하여 검색을 수행하지 않고 별도의 ajax 호출을 작성하고 데이터 테이블을 채우려 고합니다. 의심 할 여지없이 당신이 잘못 가고있는 곳입니다. – markpsmith

+0

초기 데이터 형식과 나중의 데이터 형식이 다르다고 생각합니다. –

+0

초기 데이터를 추가하십시오. 친애하는 Markpsmith에게 데이터 시트를 서버 측에서 가져 오지 않은 새로운 데이터로 채 웁니다. 클라이언트 측에서 데이터 테이블을 구성했으며 새 데이터 만 삽입하면됩니다. 서버로부터의 응답은 데이터가 다시 채워지는 문제를 제기합니다. 그것은 질문에 제공된 경고를 말합니다. 데이터는 json 형식으로되어 있으며 모든 것이 올바르게 처리되어야합니다. 무엇이 잘못되었는지 모릅니다. 단순히 서버 측 처리가없는 데이터 테이블에 새 데이터를 삽입하는 것입니다. – Arshad

답변

0

나는 스스로 대답을 찾았다 고 생각합니다. 는 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; 
      } 
관련 문제