DataTables warning: table id=Route - Requested unknown parameter '0' for row 0, column 0.

DataTables warning: table id=Route - Requested unknown parameter '0' for row 0, column 0.

bytecbytec Posts: 37Questions: 10Answers: 0

Hi,
I get the following error when I run my script.
DataTables warning: table id=Route - Requested unknown parameter '0' for row 0, column 0.

I have read through the section in "datatables.net/tn/4" and checked all the known solutions but I can't find what is wrong.

I have 4 columns returned in the JSON format

This is the JSON that reurns the data

$data[] = array(
"RecordID"  => $RecordID,
"BusNo"     => $BusNo,
"Terminal"  => $Terminal,
"BusTime"   => $BusTime);

}

This is the HTML table, I have three header columns

<table name="Route" id="Route" class="table table-striped" data-info="false">
      <thead>
        <tr>
          <th></th>
          <th></th>
          <th></th>
        </tr>
      </thead>
      <tbody class="CurrentBooking-rows">
      </tbody>
    </table>

This is the script, I have four data columns one of which is set to "visible": false

$(document).ready(function() {
  $('#myTab a').on('shown.bs.tab', function(event) {
    var target = $(event.target).attr("href");
if ($('#myTabContent').find('table').hasClass('table')) {
       $('#myTabContent').find('table').DataTable().destroy();
    }
    // Initialize DataTable for the current tab
    $('#myTabContent').find('table').DataTable({
    responsive: true,
        autoWidth: false,
        retrieve: false,
        paging: false,
        searching: false,
        //bInfo : false,
        scrollY: "550px",
        scrollCollapse: true,
      ajax: {
        type: 'POST',
        data: { tab: target }, // Send tab identifier to the server
        dataType: 'json',
    url: 'get_times.php', 
    dataSrc: '',

    language: {
            "emptyTable": "There are no times for " + target + ""
        },
        columnDefs: [
            {orderable: false},
            { width: "10%",
                "targets": 0
            },
            {width: "10%",
                "targets": 1
            },
            {width: "10%",
                "targets": 2
            },
            {
            className: "text-center"
            },

        ],
        columns: [
    {data: "RecordID","visible": false},
            {data: "BusNo",width: '10%'},
            {data: "Terminal",width: '10%'},
            {data: "BusTime",width: '33%'},
        ],
        error: function(xhr, error) {
          console.log(xhr);
          console.log(error);
          alert("An error occurred while fetching data.");
        }

      }
    });
  });
});

Can anyone see why I am getting the error: DataTables warning: table id=Route - Requested unknown parameter '0' for row 0, column 0.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,951
    edited June 2023 Answer ✓

    It looks like the lines 24-53 are inside the ajax configuration object, which won't work. Try moving the parenthesis on line 55 to line 23 to close out ajax before the other config options.

    If this doesn't help use the browser's network inspector and paste a snippet of the JSON response so we can compare it to the Datatable config.

    Also note that you have three th defined for the HTML header but have defined four columns using columns.data. The number of columns defined needs to match.

    Also the columnDefs options in lines 28 and 39 won't be applied to anything since you haven't defined the column using columns.targets.

    Kevin

  • bytecbytec Posts: 37Questions: 10Answers: 0
    edited June 2023

    Hi Kevin,
    Many thanks for your reply. I don't know how I missed the wrong position of the line 53 parenthesis. I have also taken action on your other points.

Sign In or Register to comment.