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 공개 토론에 더미를 포함하여 각 공개 토론을 시도했다. 나는 모든 질문을 검토하고 모든 가능한 대답을 검색하고 모든 것을 시도했지만 아무것도 내 문제를 해결하지 못했습니다. 이 일에 정말로 도움이 필요해. 내 코드가 무엇이 잘못되었는지 알지 못합니다.
이 서버 쪽인가를 개정? 그렇 겠지만 초기화 코드에는''serverSide ': true'가 없습니다. 또한 API를 사용하여 검색을 수행하지 않고 별도의 ajax 호출을 작성하고 데이터 테이블을 채우려 고합니다. 의심 할 여지없이 당신이 잘못 가고있는 곳입니다. – markpsmith
초기 데이터 형식과 나중의 데이터 형식이 다르다고 생각합니다. –
초기 데이터를 추가하십시오. 친애하는 Markpsmith에게 데이터 시트를 서버 측에서 가져 오지 않은 새로운 데이터로 채 웁니다. 클라이언트 측에서 데이터 테이블을 구성했으며 새 데이터 만 삽입하면됩니다. 서버로부터의 응답은 데이터가 다시 채워지는 문제를 제기합니다. 그것은 질문에 제공된 경고를 말합니다. 데이터는 json 형식으로되어 있으며 모든 것이 올바르게 처리되어야합니다. 무엇이 잘못되었는지 모릅니다. 단순히 서버 측 처리가없는 데이터 테이블에 새 데이터를 삽입하는 것입니다. – Arshad