가지 다른 방법을 시도한 후에 가장 좋은 방법은 성공시 데이터로 callback
함수를 호출하고 실패시 빈 데이터로 callback
을 호출하는 것입니다. 오류가있는 경우 .dataTables_empty
행의 텍스트를 오류 메시지 텍스트로 설정하여 테이블에 표시 할 수 있습니다. 여기 그것이 작동 것이며, 어떤 코드가 같을 것이다 방법은 다음과 같습니다
중요 참고 - 콜백이 다시 설정하기 때문에, 당신은 콜백을 호출 후 .dataTables_empty
텍스트 를 설정해야합니다 (실제로 좋은이다 다음은) 각 데이터로드에 스스로를 재설정 할 필요가 없기 때문에
$('#example').dataTable({
"columns": [
{"data": "col1"},
{"data": "col2"},
{"data": "col3"},
],
"ajax": function (data, callback, settings) {
// simulate ajax call with successful data retrieval
var myAjaxCall = new Promise(function (resolve, reject) {
$(".dataTables_empty").text("Loading...");
setTimeout(function() {
// `callback()` expects an object with a data property whose value is either
// an array of arrays or an array of objects. Must be in this format
// or you get errors.
var ajaxData = {"data": [
{"col1": "1.1", "col2": "1.2", "col3": "1.3"},
{"col1": "2.1", "col2": "2.2", "col3": "2.3"},
{"col1": "3.1", "col2": "3.2", "col3": "3.3"}
]};
resolve(ajaxData);
}, 1500);
});
myAjaxCall.then(function resolveCallback(data) {
// render data returned from ajax call
callback(data);
}, function rejectCallback(err) {
callback({data: []});
$(".dataTables_empty").text(err);
});
}
});
$('#example2').dataTable({
"columns": [
{"data": "col1"},
{"data": "col2"},
{"data": "col3"},
],
"ajax": function (data, callback, settings) {
// simulate unsuccessful ajax call
var myAjaxCall2 = new Promise(function (resolve, reject) {
$(".dataTables_empty").text("Loading...");
setTimeout(function() {
// reject promise with error message
reject("Something went terribly wrong!");
}, 1500);
});
myAjaxCall2.then(function resolveCallback(data) {
callback(data);
}, function rejectCallback(err) {
// render table with no results
callback({data: []});
// set dataTables empty message text to error message
$(".dataTables_empty").text(err);
});
}
});
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<h1>Success</h1>
<table id="example">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>