I am currently using the following to populate a page on my site:
$(document).ready(function() {
$.ajax({
'url': '/RetrieveData',
'type': 'POST',
'dataType': 'json',
success: function(response) {
$('#pagefield1').html(response.PageField1);
$('#pagefield2').html(response.PageField2);
$('#pagefield3').html(response.PageField3);
$('#pagefield4').html(response.PageField4);
numRows = 25;
table = $('#table1').DataTable({
'pageLength': numRows,
'autoWidth': false,
'data': response.TableData,
'columns': [
{ 'data': 'col0', 'name': 'col0' },
{ 'data': 'col1', 'name': 'col1' },
{ 'data': 'col2', 'name': 'col2' },
{ 'data': 'col3', 'name': 'col3' },
{ 'data': 'col4', 'name': 'col4' }
],
'columnDefs': [
{ 'visible': false, 'targets': [0] },
{ 'sortable': false, 'targets': [4] },
{ 'width': '150px', 'targets': [1] },
{ 'width': '75px', 'targets': [2, 3] },
{ 'width': '100px', 'targets': [4] },
{ 'type': 'currency', 'class': 'cell-right', 'targets': [1] },
{ 'class': 'cell-center', 'targets': [2, 3] },
{
'render': function(data, type, row) {
return '<span data-tooltip="ID: ' + row.Id + '">' + data + '</span>';
},
'targets': 1
}
],
'order': [
[1, 'asc']
]
});
},
error: function(xhr, ajaxOptions, thrownError) {
}
});
});
The problem I ran into was the area where the table was supposed to be remains blank until the ajax processes and hands data off to the $('#table1').DataTable() function call.
I want to be able to display the table the same way as if there was no data found, but instead of displaying 'No data found' message, I want it to display a 'Loading ...' message.
I have achieved what I was trying to do by adding the following before the above code in the $(document).ready() function and adding a table.destroy(); at line 13 of the above code:
table = $('#taskorders').DataTable({
'data': [
{
'col1':'',
'col2':'',
'col3':'Loading ...',
'col4':''
}
],
'columns': [
{ 'data': 'col0', 'name': 'col0' },
{ 'data': 'col1', 'name': 'col1' },
{ 'data': 'col2', 'name': 'col2' },
{ 'data': 'col3', 'name': 'col3' },
{ 'data': 'col4', 'name': 'col4' }
],
'columnDefs': [
{ 'visible': false, 'targets': [0] },
{ 'sortable': false, 'targets': [4] },
{ 'width': '150px', 'targets': [1] },
{ 'width': '75px', 'targets': [2, 3] },
{ 'width': '100px', 'targets': [4] },
{ 'type': 'currency', 'class': 'cell-right', 'targets': [1] },
{ 'class': 'cell-center', 'targets': [2, 3] },
{
'render': function(data, type, row) {
return '<span data-tooltip="ID: ' + row.Id + '">' + data + '</span>';
},
'targets': 1
}
]
});
I feel there has GOT to be a better way of doing this. Can anyone point me in the right direction??
