Перезагрузка таблицы данных Ajax после изменения даты ⇐ Jquery

[Anonymous]

Я создаю панель мониторинга бронирования в своем проекте asp.net MVC. Здесь я предоставил селектор DateTime для основного представления и из сценария я назначаю текущую дату средству выбора даты и времени в функции готовности документа.
затем он передает текущую date в ajax через таблицу данных Ajax возвращает данные, присваивает их таблице и показывает данные.
Здесь я добавил таблицу в частичном представлении. Причина, по которой я добавил эту таблицу в частичное представление, заключается в том, чтобы перезагрузить частичное представление в случае каких-либо изменений.
Вот мой код HTML-представления














@{ Html.RenderPartial("_ArrivingSection"); }



@{ Html.RenderPartial("_InProcessJobsSection"); }

@{ Html.RenderPartial("_FutureBookingsSection"); }



Это текущий рабочий скрипт, который получает данные от контроллера и отображает их в таблице.
$('#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 `
Assign Job  

`;
} else {
// Display the 'Arrived' button if the customer hasn't arrived
return `
Arrived  
Assign Job  

`;
}
}
}
],
language: {
search: "Search"
}
});

Я хочу сделать то же самое при изменении даты, затем передать дату контроллеру, получить данные и перезагрузить таблицу.
Это то, что я пробовал, но это не работает, у меня было много ошибок со сценариями таблиц данных. Когда я добавил получение данных в функцию готовности документа, он получил ошибки, такие как datatable не определен, Datatable не загружается, как мудрые ошибки. Может ли кто-нибудь помочь мне завершить этот процесс этим или любым другим способом?






< 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 `
Assign Job
`;
} else {
return `
Arrived
Assign Job
`;
}
}
}
]
});

} catch (error) {
console.error('Error initializing DataTable:', error);
}
});





Подробнее здесь: https://stackoverflow.com/questions/790 ... ate-change