DataTable : Using a function with ajax.reload()
Question
I have some troubles with the method ajax.reload() - nothing happens. I've tested with this JavaScript:
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": {
"async": false,
"url": "arrays.txt",
"dataSrc": function(json){return json;} // really necessary ?
}
} );
$('#reload').click(function () {
table.ajax.reload(function(data){
console.log(data);
}, false);
} );
} );
arrays.txt contents :
[
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$320,800"
],
[
"Garrett Winters",
"Accountant",
"Tokyo",
"8422",
"2011/07/25",
"$170,750"
]
]
and html contents :
<button id="reload">reload</button>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
If I change "your" code (dataTables.js) to
if(callback){
var api = new _Api( settings );
callback( api.ajax.json() );
}
instead of
if(callback){
var api = new _Api( settings );
api.one( 'draw', function(){
callback( api.ajax.json() );
});
}
it works for me...
Actually, it works if you click a second time on the button, but this is not a solution.
1 answers
solution1
0 2015-07-14 16:15:50
Your code works fine.
I have removed async: false , it seems unnecessary, however the code works with this option as well.
Option dataSrc is needed because you're returning array of arrays as your data, but it could be simplified as dataSrc: "" . From the manual :
Note that if your Ajax source simply returns an array of data to display, rather than an object, set this parameter to be an empty string.
See the example below for demonstration.
$(document).ready(function () { // AJAX emulation for demonstration only $.mockjax({ url: 'arrays.txt', responseTime: 200, response: function(settings){ this.responseText = [ [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", new Date(), "$320,800" ], [ "Garrett Winters", "Accountant", "Tokyo", "8422", new Date(), "$170,750" ] ] } }); var table = $('#example').DataTable({ "ajax": { url: "arrays.txt", dataSrc: "" } }); $('#reload').click(function () { table.ajax.reload(function(data){ console.log(data); }, false); } ); });
<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script> <script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script> </head> <body> <button id="reload">reload</button> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> <tbody> </tbody> </table> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.