Cannot read property 'sWidth' of undefined

irfan95

I am using DataTable() to generate dynamic table. The table header is dynamic. The headers will change on the basis of month. There is nav buttons for changing the months. On the changing of the the months the table is also changed. i have written an ajax funstion for fetching data and to show in the table. The function is called when the document is ready and on the onClick() event the buttons

$("#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();
        }
      });
    };

This process is working fine when the document is ready. But when I change the month using month navigation button, then the error occurs. Cannot read property 'sWidth' of undefined this is the error.
How can i solve the error?

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

irfan95

https://jsbin.com/pilemayapi/edit?html,output

colin

The test case doesn't run - please can you take a look at the errors.

Colin

irfan95

I am new to here. I am unable to create test case properly. Actually I am generating table fetching data from database. So how can fetch data in this test case?? because my backend calculations are not here?

kthorngren

This process is working fine when the document is ready. But when I change the month using month navigation button, then the error occurs. Cannot read property 'sWidth' of undefined this is the error.

I might be missing it but I don't see your Datatable initialization code. If you want to change the number of columns then you will need to reinitialize Datatables using either destroy() before reinitialization or destroy.

Kevin