Why am I getting an Request Unknown parameter '0' for row 0, column 0. error?

BradleyO07

Below is my table:

<table class="genericTable" id="docTable" style="width:100%">
            <thead>
              <tr class="tableHeader">
                <th>Workplace</th>
                <th>Group</th>
                <th>Step</th>
                <th>Active</th>
              </tr>
              <tr class="searchRow tableHeader">
                <th></th>
                <th></th>
                <th></th>
                <th></th>
              </tr>
            </thead>
          </table>

Here is where I populate it:

var docDT;
/**
 * Generates the Main Table
 */
function getChecklist() {
  //Initialize DataTable
  docDT= $('#docTable').DataTable( {
    display: 'envelope',
    ajax: {
      'type': 'POST',
      'url': './ajax/getData.ajax.php',
      'data': {
        'getChecklist': 1,
      }
    },
    table: ('#docTable'),
    orderCellsTop: true,
    searching: true,
    paging: true,
    bInfo: true,
    iDisplayLength: 50,
    scrollX: true,
    dom:
      "<'row'<'col-12 col-sm-6 col-md-4 col-lg-3'l><'col-md-4 col-lg-6 d-none d-md-block'><'col-12 col-sm-6 col-md-4 col-lg-3'f>>" +
      "<'row'<'col-sm-12'tr>>" +
      "<'row'<'col-sm-5'i><'col-sm-7'p>>",
      columnd: [
        { data: null, render: function ( data, type, row) {
          return "<a class=\"default-link\" onClick=\"viewDocEntry(" + data.id + ")\">" + data.area + " (Rev:" + data.rev + ")";
        } 
        },
        { data: "grouping" },
        { data: "step" },
        { data: "active" },
      ],
    fixedColumns: {
      leftColumns: 1
    },
    initComplete: function () {
      
      //This Draws The Option For The Table For Static Row
      this.api().columns([0]).every( function () {
        var column = this;
        
        var select = $('<input type="text" class="fixed_col" placeholder="Search" />')
          .appendTo($(column.header()).parent().parent().children('tr').eq(1).children('th').eq(0).empty() )
          .on('keyup change clear', function () {
            var val = $.fn.dataTable.util.escapeRegex(
              $(this).val()
            );
            
            column
              .search( this.value )
              .draw();
          });
      });
      this.api().columns([]).every( function (index) {
        var column = this;
        var select = $('<input style="width:80%;" type="text" placeholder="Search" />')
          .appendTo($(column.header()).parent().parent().children('tr').eq(1).children('th').eq(index).empty() )
          .on( 'keyup change clear', function () {
            var val = $.fn.dataTable.util.escapeRegex(
              $(this).val()
            );
            
            column
              .search( this.value )
              .draw();
          });
      });
    }
  });
  
  docDT.buttons().container()
    .appendTo( '#docTable_wrapper .col-md-6:eq(0)' );
    
  $( docDT.table().container() ).on( 'keyup change clear', '.fixed_col', function () {
    docDT
      .column( $(this).data('index') )
      .search( this.value )
      .draw();
  });
  
  //Wait Half A Second For Tables To Finish And Align Columns
  setTimeout(fixColumns, 500, docDT);
}

Where is the error coming from and what could I do to fix it?

kthorngren

The place to start is with the troubleshooting steps provided at the link in the error:
https://datatables.net/manual/tech-notes/4

In line 27 you have columnd instead of columns. Use the browser's network inspector to view the JSON response. By default Satatables looks for the row data in the data object. If its located somewhere else then use ajax.dataSrc to point to the data. See the Data docs for more details.

//Wait Half A Second For Tables To Finish And Align Columns
setTimeout(fixColumns, 500, docDT);

Not sure what this code is doing but you might want to call the fixColumns function directly in initComplete.

Kevin