Processing Indicator not showing in Datatable
Processing Indicator not showing in Datatable
kishorkabadi
Posts: 9Questions: 4Answers: 0
var dt_basic_table1 = $('#RequestList');
dt_basic_table1.DataTable().clear();
if (dt_basic_table1.length) {
var status = $('input[name="Status"]:checked').val();
if (status == undefined || status == "Pending")
status = "P";
else if (status == "Completed")
status = "C";
else status = "P";
var url = dt_basic_table1.data('request-url');
var dt_fixedheader1 = dt_basic_table1.DataTable({
paging: true,
ordering: true,
info: true,// control table information display field
Processing: true,// control the processing indicator.
language: { "processing": '<div class="d-flex justify-content-center"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div></div>' },
serverSide: true,// recommended to use serverSide when data is more than 10000 rows for performance reasons
destroy: true,
ajax: {
url: url,
type: 'POST',
data: function (d) {
return $.extend({}, d, {
"extra": [
{
"field": "status",
"value": status
},
]
});
}
},
columns: [
{ data: '' },
{ data: 'Name' },
{ data: 'Email' },
{ data: 'Currency' },
{ data: 'ReferenceNo' },
{ data: 'CreatedAt' },
{ data: '' }
],
columnDefs: [
{
// For Responsive
className: 'control',
orderable: false,
targets: 0,
searchable: false,
render: function (data, type, full, meta) {
return '';
}
},
{
// Actions
targets: -1,
title: 'Actions',
orderable: false,
render: function (data, type, full, meta) {
return (
'<div class="btn btn-sm btn-icon item-edit"><i class="text-primary ti ti-pencil"></i></div>'
);
}
}
],
order: [[1, 'desc'], [2, 'desc'], [3, 'desc']],
dom: '<"card-header flex-column flex-md-row"<"head-label text-center"><"dt-action-buttons text-end pt-3 pt-md-0"B>><"row"<"col-sm-12 col-md-2"l><"col-sm-12 col-md-4 toolbar"frtip><"col-sm-12 col-md-6 d-flex justify-content-center justify-content-md-end"f>>t<"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
displayLength: 10,
lengthMenu: [10, 25, 50, 75, 100],
buttons: [
{
extend: 'collection',
className: 'btn btn-label-primary dropdown-toggle me-2',
text: '<i class="ti ti-file-export me-sm-1"></i> <span class="d-none d-sm-inline-block">Export</span>',
buttons: [
{
extend: 'excel',
text: '<i class="ti ti-file-spreadsheet me-1"></i>Excel',
className: 'dropdown-item',
title: "Bank Deposits",
action: function () {
ExportToExcel();
},
}
]
},
{
text: '<i class="ti ti-plus me-sm-1"></i> <span class="d-none d-sm-inline-block">CREATE DCB</span>',
className: 'create-new btn btn-primary'
}
],
responsive: {
details: {
display: $.fn.dataTable.Responsive.display.modal({
header: function (row) {
var data = row.data();
return 'Details of ' + data['full_name'];
}
}),
type: 'column',
renderer: function (api, rowIdx, columns) {
var data = $.map(columns, function (col, i) {
return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
? '<tr data-dt-row="' +
col.rowIndex +
'" data-dt-column="' +
col.columnIndex +
'">' +
'<td>' +
col.title +
':' +
'</td> ' +
'<td>' +
col.data +
'</td>' +
'</tr>'
: '';
}).join('');
return data ? $('<table class="table"/><tbody />').append(data) : false;
}
}
}
});
}
This is my code
Answers
Looks like you've got "Processing", it should be
processing,Colin
yes, i changed "Processing" to "processing" but still loading indicator not showing. I observed that when i remove serverSide: true then its showing loading indicator but data not loading in datatable.
If you could like to a page showing the issue I'll be able to debug it for you.
Thanks,
Allan
Now Loading indicator showing but its showing in outside table.
How to show loading indicator below the table header.
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin