使用 jQuery/API 更新 DataTable

问：

我想更新我在这里创建的表：

 $.ajax({
     url: 'URL',
     async: false,
     success: function (data) {
         console.log(data);
         if (data && data.DepDailyAct && Array.isArray(data.DepDailyAct)) {
             data.DepDailyAct.forEach(function (department, index) {
                 // Create a unique table ID for each department
                 const tableId = 'example' + index;

                 // Create a new container div for each department
                 const container = $('<div>').addClass('container-fluid mb-5');
                

                 // Create a header div with department name
                 const currentDate = $('#currentDate').text();
                 const header = $('<div>').addClass('text-center');
                 header.append($('<h3>').text(department.DepartmentName));
                 header.append($('<h5>').text(currentDate));


                 // Append the header to the container
                 container.append(header);

                 // Create a new table with a unique ID for each department
                 const table = $('<table>').attr('id', tableId).addClass('display table table-striped table-bordered');

                 // Append the custom table headers to the table
                 const tableHead = $('<thead>').append(
                     $('<tr>').append(
                         $('<th>').attr('rowspan', '2').text('Date'),
                         $('<th>').attr('rowspan', '2').text('Employee Name'),
                         $('<th>').attr('rowspan', '2').text('Project'),
                         $('<th>').attr('rowspan', '2').text('Activity'),
                         $('<th>').attr('colspan', '2').text('Inclusive Time'),
                         $('<th>').attr('colspan', '2').text('REGULAR HR'),
                         $('<th>').attr('colspan', '2').text('OVERTIME WORK'),
                         $('<th>').attr('colspan', '2').text('Other Expenses')
                     ),
                     $('<tr>').append(
                         $('<th>').text('Time In'),
                         $('<th>').text('Time Out'),
                         $('<th>').text('No.of hrs'),
                         $('<th>').text('Amount'),
                         $('<th>').text('No.of hrs'),
                         $('<th>').text('Amount'),
                         $('<th>').text('Particulars'),
                         $('<th>').text('Amount')
                     )
                 );

                 // Append the table head to the table
                 table.append(tableHead);

                 // Append the table to the container
                 container.append(table);

                 // Append the container to the document body
                 $('body').append(container);

                 // Initialize DataTable for each department
                 let tables = $('#' + tableId).DataTable({
                     "order": [[0, "asc"]],
                     "lengthMenu": [10, 25, 50],
                     "searchPlaceholder": "Search...",
                     data: department.DepartmentActivities,
                     columns: [
                         { data: 'formattedDate' },
                         { data: 'EmployeeName' },
                         { data: 'ProjectName' },
                         { data: 'ActivityName' },
                         { data: 'formattedTimeIn' },
                         { data: 'formattedTimeOut' },
                         { data: 'formattedNoRegHrs' },
                         { data: 'formattedRegHrsAmount' },
                         { data: 'formattedNoOTHrs' },
                         { data: 'formattedOTHrsAmount' },
                         { data: 'ExpParticulars' },
                         { data: 'formattedExpAmount' },
                     ]
                 });
             });
         } else {
             console.error("No valid data or DepDailyAct is not an array.");
         }
     }
 });

使用功能如下：

function sendPostRequest(postData) {
    var postDataJSON = JSON.stringify(postData);

    console.log("Post Data", postDataJSON);

    $.ajax({
        type: "POST",
        url: "POST URL",
        async: false,
        data: postDataJSON,
        contentType: "application/json",
        success: function (response) {
            console.log("POST Response", response);

            if (response.ReturnMsg === "No Matching Records Found!") {
                // Clear all tables
                Object.values(tables).forEach(table => {
                    if (table) {
                        table.clear().draw();
                    }
                });
            } else {
                Object.values(tables).forEach(table => {
                    if (table) {
                        table.clear().draw();
                    }
                });

                response.DepDailyAct.forEach(department => {
                    const tableId = 'example'; // No 'index' variable, assuming you meant to use 'example'

                    // Access the table from the 'tables' variable
                    let table = tables[tableId];

                    if (table) {
                        // Check if the table is defined before performing operations
                        table.clear().draw();
                        department.DepartmentActivities.forEach(activity => {
                            // Update the table with new data
                            table.row.add([
                                activity.formattedDate,
                                activity.EmployeeName,
                                activity.ProjectName,
                                activity.ActivityName,
                                activity.formattedTimeIn,
                                activity.formattedTimeOut,
                                activity.formattedNoRegHrs,
                                activity.formattedRegHrsAmount,
                                activity.formattedNoOTHrs,
                                activity.formattedOTHrsAmount,
                                activity.ExpParticulars,
                                activity.formattedExpAmount
                                // Add other columns as needed
                            ]).draw();
                        });
                    } else {
                        console.error('Table is undefined for ID: ' + tableId);
                    }
                });
            }
        }
    });
}

我想更新我创建的 DataTable