Javascript 属性在使用datatable（）时无法读取未定义的

我正在使用DataTable（）生成动态表。表格标题是动态的。标题将根据月份进行更改。有用于更改月份的导航按钮。随着月份的变化，表格也随之变化。我编写了一个ajax函数，用于获取数据并显示在表中。该函数在文档准备就绪时调用，并在onClick（）事件中单击按钮

$("#month-next-btn").click(function(){
      $("#selected-month").html(incrementDecrementMonth(1));
      array = yearMonthArr($("#selected-month").html());
      year = array[0];
      month = array[1];
      // setTimeout(function(){fetchMonthlyAttendanceStatus()},10);
      fetchMonthlyAttendanceStatus();

      setNavBtnState(year, month);
    })

    $("#month-prev-btn").click(function(){
      $("#selected-month").html(incrementDecrementMonth(-1));
      array = yearMonthArr($("#selected-month").html());
      year = array[0];
      month = array[1];
      // setTimeout(function(){fetchMonthlyAttendanceStatus()},10);
      fetchMonthlyAttendanceStatus();

      setNavBtnState(year, month);
    })

    function fetchMonthlyAttendanceStatus(){
      var dateSelected = $("#selected-month").html();
      array = yearMonthArr($("#selected-month").html());
      year = array[0];
      month = array[1];

      $.ajax({
        type: 'GET',
        url: '{% url "attendance:ajax-monthly-attendance-status" %}',
        data: {
          'month': month,
          'year': year
        },
        dataType: 'json',
        success: function (data) {
          $("#monthly-attendance-status-table-header").empty();
          $("#monthly-attendance-status-table-rows tr").remove();

          $("#monthly-attendance-status-table-header").append(`<th class="text-center" style="border-bottom: 2px solid #EAEAEA; font-weight:normal;">ID</th>
                                                                <th class="text-center" style="border-bottom: 2px solid #EAEAEA; font-weight:normal;">Name</th>`);
          var monthS = month.slice(0, 3);
          var dayLst = data.day_lst;
          for (var i = 0; i < dayLst.length; i++) {
            if (dayLst[i] < 10) {
              dayLst[i] = '0' + dayLst[i];
            }
            var date = dayLst[i] + '-' + monthS;
            $("#monthly-attendance-status-table-header").append(`<th class="text-center" style="border-bottom: 2px solid #EAEAEA; font-weight:normal;">${date}</th>`);
          }

          var employeeIdLst = data.employee_id_lst;
          var employeeNameLst = data.employee_name_lst;
          var employeeStatusLst = data.employee_attendance_status_lst;

          for (var i = 0; i < employeeIdLst.length; i++) {
            var employeeId = employeeIdLst[i];
            var employeeName = employeeNameLst[i];
            var statusLst = employeeStatusLst[i];
            $("#monthly-attendance-status-table-rows").append(`<tr style="color: ${textC};" id="row-${employeeId}">
                                                                <td>${employeeId}</td>
                                                                <td><a href="#" onclick="monthlyAttendanceDetail(${employeeId})"><b>${employeeName}</b></a></td>
                                                              </tr>`);
            for (var j = 0; j < statusLst.length; j++) {
              var status = statusLst[j];

              if (status == 'Present') {
                $("#row-" + employeeId).append(`<td><span style="color: ${greenC}"><b>P</b></span></td>`);
              }else if (status == 'Absent') {
                $("#row-" + employeeId).append(`<td><span style="color: ${redC}"><b>A</b></span></td>`);
              }else if (status == 'Weekend') {
                $("#row-" + employeeId).append(`<td><span style="color: ${blueC}"><b>W</b></span></td>`);
              }else if (status == 'Holiday') {
                $("#row-" + employeeId).append(`<td><span style="color: ${textC}"><b>H</b></span></td>`);
              }else if (status ==  'Leave') {
                $("#row-" + employeeId).append(`<td><span style="color: ${yellowC}"><b>L</b></span></td>`);
              }
            }
          }


          $("#monthly-attendance-status-table").DataTable({
            "retrieve": true,
            "scrollX": "303px",
          });
          // $("#monthly-attendance-status-table").DataTable().destroy();

          // $('#monthly-attendance-status-table').DataTable().clear();
          // $("#monthly-attendance-status-table").DataTable();
        }
      });
    };

$（“#下个月btn”）。单击（函数（）{
$（“#所选月份”）.html（递增递减月份（1））；
数组=yearMonthArr（$（“#所选月份”）.html（）；
年份=数组[0]；
月=数组[1]；
//setTimeout（函数（）{fetchMonthlyAttendanceStatus（）}，10）；
fetchMonthlyAttendanceStatus（）；
SETNAVBnstate（年、月）；
})
$（“#上个月btn”）。单击（函数（）{
$（“#所选月份”）.html（递增递减月份（-1））；
数组=yearMonthArr（$（“#所选月份”）.html（）；
年份=数组[0]；
月=数组[1]；
//setTimeout（函数（）{fetchMonthlyAttendanceStatus（）}，10）；
fetchMonthlyAttendanceStatus（）；
SETNAVBnstate（年、月）；
})
函数fetchMonthlyAttendanceStatus（）{
var dateSelected=$（“#所选月份”）.html（）；
数组=yearMonthArr（$（“#所选月份”）.html（）；
年份=数组[0]；
月=数组[1]；
$.ajax({
键入：“GET”，
url:“{%url”考勤：ajax每月考勤状态“%}”，
数据：{
“月”：月，
“年”：年
},
数据类型：“json”，
成功：功能（数据）{
$（“#每月出勤状态表标题”）.empty（）；
$（“#每月出勤状态表行tr”）.remove（）；
$（“#每月出勤状态表标题”）.append（`ID
名称`）；
var月数=月数切片（0,3）；
var dayLst=data.day_lst；
对于（变量i=0；i

当文档准备就绪时，此过程工作正常。但是，当我使用月份导航按钮更改月份时，就会出现错误无法读取未定义的属性“sWidth”这是错误。 如何解决错误