Why is my data table not population?

BradleyO07

I am trying to develop a piece of code that upon selecting an area from a drop down menu. This will start to create a table. Currently, when the area is selected I am getting an error that states "Cannot read properties of undefined (reading 'style')". This error is pointing towards my function that is creating the data table. Below is where it is occuring:

var activeDT;
function getActiveAjax(area){
  //console.log(area);
  
  var baseTable = "<div class=\"col-12 col-lg-6\">" +
                    "<table class=\"genericTable\" id=\"activeTable\" style=\"width:100%\">" +
                      "<thead>" +
                        "<tr>" +
                          "<th style=\"width:4%\"></th>" +
                          "<th style=\"width:33%\"></th>" +
                          "<th style=\"width:10%\"></th>" +
                          "<th style=\"width:30%\"></th>" +
                          "<th style=\"width:25%\"></th>" +
                        "</tr>" +
                      "</thead>" +
                    "</table>" +
                  "</div>";
  
  document.getElementById("content-div-active").innerHTML = baseTable;
  
//The Error Is Occurring Here
  activeDT = $('#activeTable').DataTable( {
    destroy: true,
    ajax: {
      "type": "POST",
      "url": "./ajax/getData.ajax.php",
      "data": {
        'getActive': area,
      }
    },
    orderCellsTop: true,
    searching: true,
    paging: true,
    iDisplayLength: 50,
    bInfo: false,
    scrollX: true,
    fixedColumns: true,
    dom:
      "<'row'<'col-1 col-sm-1 col-md-1 col-lg-1'f>>" +
      "<'row'<'col-sm-12'tr>>" +
      "<'row'<'col-sm-5'i><'col-sm-7'p>>",
    columns: [
      { data: null, render: function (data, type, row ) {
        return "<a class=\"default-link\" onClick=\"viewEntry('" + data.id + "')\>" + data.area + " (Rev: " + data.rev + ")</a>";
      } },
      { data: "description" },
      { data: null, render: function ( data, type, row) {
        if(data.grouping == 1){
          return "Sort";
        } else if(data.grouping == 2){
          return "Straighten";
        } else if(data.grouping == 3){
          return "Scrub";
        } else if(data.grouping == 4){
          return "Stabilize";
        } else if(data.grouping == 5){
          return "Substain";
        } else if(data.grouping == 6){
          return "Safety";
        } else if(data.grouping == 7){
          return "Sustainability";
        }
      } },
      { data: "step" },
      { data: "response" },
      { data: null, render: function (data, type, row) {
        return data.datetime.slice(0,10);
      } },
    ],
  });
}

Could I be creating the data table wrong in this instance or am I just missing a certain character somewhere within my code?

kthorngren

You defined 5 columns in the thead but have 6 defined in the Datatable. The number of columns need to match or you will get errors like the one you are seeing.

Kevin