Привет! Я хотел показать колесо загрузки, которое показывает пользователю, что данные загружаются, и сидеть и ждать. Чтобы сделать это, я должен использовать serverSide: True Затем я обнаружил, что это нарушает функциональность таблиц.
Таблица больше не будет отображать только 10 записей на страницу, она будет отображать все из них, число внизу, которое говорит вам, сколько записей будет отображаться только 0. Это все произойдет после загрузки данных.
Вот код для таблицы данных:
var visitorTable = $('#visitorTable').on('error.dt', flashToasts).DataTable({
serverSide: true,
order: [[ 3, "desc" ]],
processing: true,
language: {
processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw" style="margin-top: 100px"></i><span class="sr-only">Loading...</span> '
},
scrollX: true,
ajax: {
url: site.uri.public + '/api/list/visitors_basic_details/' + start + '/' + end,
dataSrc: function(json) {
$('#list_title').html(json.length + ' Visitors for the selected date range');
identities = json;
return json;
}
},
columns: [
{data: 'avatar_url',
"orderable": false,
render: function(data, type, full, meta) {
if(data != '') {
image = '<img src="' + data + '" alt="Profile Picture">';
} else {
if(full.gender == 1)
image = '<img src="' + site.uri.public + '/images/female-avatar.png" alt="Profile Picture" height="50px" width="50px">';
else if(full.gender == 0)
image = '<img src="' + site.uri.public + '/images/male-avatar.png" alt="Profile Picture" height="50px" width="50px">';
else
image = '<img src="' + site.uri.public + '/images/mixed-avatar.png" alt="Profile Picture" height="50px" width="50px">';
}
return image;
}
},
{data: 'first_name',
render: function(data, type, full, meta) {
if (full.gender != null) {
if(full.gender == 0) {
gender = 'Male';
} else {
gender = 'Female';
}
} else {
gender = '';
}
if (full.birth_date != null) {
age = Math.round(((new Date()).getTime()/1000 - full.birth_date) / (60 * 60 * 24 * 365));
} else {
age = '';
}
return '<font color="#E15910">' + data + ' ' + full.last_name + '</font>' + '<br>' + gender + ' ' + age;
// return (new Date()).getTime();
}
},
{data: 'email_address'},
{data: 'last_seen',
render: function(data, type, full, meta) {
if (data != null) {
last_seen = moment.unix(data).format("DD/MM/YYYY HH:mm");
} else {
last_seen = '';
}
// Hide the timestamp so you are able to sort the column correctly
return last_seen;
}
},
{data: 'provider',
render: function(data, type, full, meta) {
if (data == '') {
return 'Registration Form';
} else {
return capitalizeFirstLetter(data);
}
}
},
{data: 'marketing_consent',
render: function(data, type, full, meta) {
if (data == 1) {
return 'Yes';
} else {
return 'No';
}
}
}
]
});
Вот пример общего числа внизу, отображающего 0:
Пример
Вот как это должно выглядеть:
Правильный пример
При удалении serverSide: True все снова работает, но колесо загрузки не отображается.