본문 바로가기
Web

[Web][Datatables] ajax callback

by Real Iron 2019. 1. 24.

 가지 다른 방법을 시도한 후에 가장 좋은 방법은 성공시 데이터로 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>