I’m creating a Booking dashboard on my asp.net MVC project. Here I have given the DateTime selector for the main view and from the script, I’m assigning the current date to the date time picker on the document ready function.
then it passes the current date to ajax via the Ajax data table returns the data assigns it to the table and shows the data.
Here I have added the table on the partial view. The reason I added this table to the partial view is to reload the partial view when if there is any change.
Here is my HTML view code
<div class="container-xxl flex-grow-1 container-p-y">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="card mb-4">
<div class="card-body">
<div class="date-container">
<input type="date" id="bookingDate" name="bookingDate" />
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
@{ Html.RenderPartial("_ArrivingSection"); } </div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
@{ Html.RenderPartial("_InProcessJobsSection"); } </div>
<div class="col-md-6 col-sm-6 col-xs-6">
@{ Html.RenderPartial("_FutureBookingsSection"); } </div>
</div>
This is the current working script that get the data from the controller and show on the table.
$('#arriving').DataTable({
processing: true,
serverSide: true,
filter: true,
scrollY: '200px', // Set the fixed height for the table
orderMulti: false,
ajax: {
url: '@Url.Action("GetArrivingInformations", "Booking")',
type: "POST",
datatype: "json",
},
columns: [{
"data": "CustomerName",
"name": "Customer Name"
},
{
"data": "ContactNumber",
"name": "Contact Number"
},
{
"data": "ServiceName",
"name": "Service"
},
{
"data": "CheckInTime",
"name": "Check In",
"render": function (data, type, row) {
// Assuming data is a TimeSpan object with Hours and Minutes
if (data) {
// Convert the TimeSpan to a valid time in Date format
let hours = data.Hours;
let minutes = data.Minutes;
// Create a Date object with the current date but set the time to the TimeSpan's hours and minutes
let date = new Date();
date.setHours(hours, minutes);
// Format the date to AM/PM
return date.toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit',
hour12: true
});
}
return 'Invalid Time';
}
},
{
"data": "EncryID",
"render": function (data, type, row) {
// Check if customer has already arrived
if (row.IsCustomerArrived) {
// If arrived, don't display the 'Arrived' button
return `<div class="btn-group bx-pull-right" role="group">
<a href="#" class="btn-info btn-sm common-btn" onclick="openAssignJobModal('${data}', '${row.ServiceName}','${row.CustomerName}')">Assign Job</a>
</div>`;
} else {
// Display the 'Arrived' button if the customer hasn't arrived
return `<div class="btn-group bx-pull-right" role="group">
<a href="#" class="btn-primary btn-sm common-btn" onclick="markAsArrived('${data}', this)">Arrived</a>
<a href="#" class="btn-info btn-sm common-btn" onclick="openAssignJobModal('${data}', '${row.ServiceName}')">Assign Job</a>
</div>`;
}
}
}
],
language: {
search: "Search"
}
});
I want to do the same when date is changed, then pass the date to the controller and get the data and reload the table
This is what I have tried, but it’s not working, I got so many errors with the data table scripts. When I added the getting data to the document ready function it get errors like datatable is not defined, Datatable is not loaded like wise errors. Can some one help me to complete this process with this way or any alternative way ?
<script src="~/Addons/DataTable/jquery-3.6.1.min.js"></script>
<!-- DataTables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
< script >
var arrivingTable; // Declare this globally so we can access it from the date change function
$(document).ready(function () {
// Function to safely reload the table
function safeReloadTable() {
arrivingTable.ajax.reload();
}
// Bind date change event
$('#bookingDate').on('change', function () {
console.log('Date changed:', $(this).val());
safeReloadTable();
});
// Set current date in the date picker
const today = new Date().toISOString().split('T')[0];
$('#bookingDate').val(today);
try {
arrivingTable = $('#arriving').DataTable({
processing: true,
serverSide: true,
filter: true,
scrollY: '200px',
orderMulti: false,
ajax: {
url: '@Url.Action("GetArrivingInformations", "Booking")',
type: "POST",
datatype: "json",
data: function (d) {
return $.extend({}, d, {
"bookingDate": $('#bookingDate').val()
});
}
},
columns: [
// Your existing columns configuration
{
"data": "CustomerName",
"name": "Customer Name"
},
{
"data": "ContactNumber",
"name": "Contact Number"
},
{
"data": "ServiceName",
"name": "Service"
},
{
"data": "CheckInTime",
"name": "Check In",
"render": function (data, type, row) {
if (data) {
let hours = data.Hours;
let minutes = data.Minutes;
let date = new Date();
date.setHours(hours, minutes);
return date.toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit',
hour12: true
});
}
return 'Invalid Time';
}
},
{
"data": "EncryID",
"render": function (data, type, row) {
if (row.IsCustomerArrived) {
return `<div class="btn-group bx-pull-right" role="group">
<a href="#" class="btn-info btn-sm common-btn" onclick="openAssignJobModal('${data}', '${row.ServiceName}','${row.CustomerName}')">Assign Job</a>
</div>`;
} else {
return `<div class="btn-group bx-pull-right" role="group">
<a href="#" class="btn-primary btn-sm common-btn" onclick="markAsArrived('${data}', this)">Arrived</a>
<a href="#" class="btn-info btn-sm common-btn" onclick="openAssignJobModal('${data}', '${row.ServiceName}','${row.CustomerName}')">Assign Job</a>
</div>`;
}
}
}
]
});
} catch (error) {
console.error('Error initializing DataTable:', error);
}
});
</script>
