Scribd
Upload
15 views2 pages

Loader and Datatable

The document contains code for a user dashboard that includes a spinner loader for data loading and a responsive DataTable to display user information such as ID, Name, Mobile, Approved Time, and Profile Type. It includes JavaScript to manage the display of the loader and the DataTable, initializing it with data and specific configurations. Additionally, it shows a snippet from a controller that retrieves approved profiles from a database using a union query.

Uploaded by

rohitkumar2626122
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
15 views2 pages

Loader and Datatable

The document contains code for a user dashboard that includes a spinner loader for data loading and a responsive DataTable to display user information such as ID, Name, Mobile, Approved Time, and Profile Type. It includes JavaScript to manage the display of the loader and the DataTable, initializing it with data and specific configurations. Additionally, it shows a snippet from a controller that retrieves approved profiles from a database using a union query.

Uploaded by

rohitkumar2626122
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

user-dashboard.blade.

php file

{{-- spinner loader before datatable load by hemant --}}


<div id="datatable-loader" class="text-center py-4"
style="display:none;">
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div>Processing...</div>
</div>
{{-- end spinner loader --}}
{{-- start datatable here by hemant --}}
<div class="col-12 mt-3">

<table class="table dt-responsive nowrap w-100"


id="reportTable">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Mobile</th>
<th>Approved Time</th>
<th>Profile Type</th>
</tr>
</thead>
</table>
</div>
{{-- end datatable here --}}

<script>
// Show loader, hide table temporarily
$('#datatable-loader').show();
$('#reportTable').hide();

//ajax function code below

// Destroy old table if exists


if ($.fn.DataTable.isDataTable('#reportTable')) {
$('#reportTable').DataTable().destroy();
}
// Initialize DataTable
$('#reportTable').DataTable({
data: caste_Response[5],
responsive: true,
pageLength: 5,
lengthMenu: [5, 10, 25, 50, 100],
columns: [
{ data: 'id' },
{ data: 'name' },
{ data: 'user_mobile' },
{ data: 'is_approved_on',
render: function(data) {
return data ? data.split(' ')[0] : '';
}
},
{
data: 'matchmaker_is_profile',
render: function(data) {
return data == 1 ? 'Basic Profile' : 'Approved
Profile';
}
}
],
language: {
search: "Search:",
lengthMenu: "Show _MENU_ entries",
info: "Showing _START_ to _END_ of _TOTAL_ entries",
paginate: {
next: "Next",
previous: "Previous"
},
zeroRecords: "No matching records found"
}
});
// Hide loader and show table
$('#datatable-loader').hide();
$('#reportTable').show();
<script/>

DashboardController.php file code

//this code of $approved,$addbasic = last lines code -


>select('id','name','user_mobile','is_approved_on','matchmaker_is_profile');

$approvedProfile = $aporved->union($adbasic)->get();

You might also like