Requested unknown parameter 'prog_name' for row 0 in data table error

In one of my PHP project, I have a data table. I need to show extra/detailed info on row click of the data table. For this, I'm trying to implement the example given at click here to see details. However, its not working. It shows me the error DataTables warning: table id=manage_elvideos_table - Requested unknown parameter 'prog_name' for row 0. For more information about this error, please see http://datatables.net/tn/4

As suggested in the error message, I have tried to overcome the error by following suggested points but no success yet.

The ajax call to populate the data table is working fine returning status 200 and the response is as follows:

{"draw":1,"recordsTotal":1,"recordsFiltered":1,"data":[["B.Ed","Year 1","Course 1","Unit 1","Meaning, Nature and principal of Growth and development","Miss Babita","1","\n                            <a href=\"http:\/\/localhost\/jdnbcci\/hoopla\/elearning\/edit_elvideos\/1\" id=\"48_b\" data-value=\"uac_ea\" class=\"trix\" title=\"Edit\"> <span class=\"glyphicon glyphicon-edit\"><\/span><\/a>\n                            <a href=\"http:\/\/localhost\/jdnbcci\/hoopla\/elearning\/view_elvideos\/1\" id=\"48_c\" data-value=\"uac_va\" class=\"trix\" title=\"View\"> <span class=\"glyphicon glyphicon-eye-open\"><\/span><\/a>\n                            <a href=\"http:\/\/localhost\/jdnbcci\/hoopla\/elearning\/delete_elvideos\/1\" id=\"48_d\" data-value=\"uac_da\" class=\"trix\" title=\"Delete\"> <span class=\"glyphicon glyphicon-trash\"><\/span><\/a>\n                            "]]}                  var dataTable = $('#manage_elvideos_table').DataTable({              //"processing":true,              "serverSide":true,              //"order":[],              "ajax":{                  url:"<?=site_url();?>hoopla/elearning/fetch_elvideos",                  dataType: 'json',                  type:"POST"              },              "columns": [                  {                      "className":      'details-control',                      "orderable":      false,                      "data":           null,                      "defaultContent": ''                  },                  { "data": "prog_name" },                  { "data": "prog_year" },                  { "data": "course_name" },                  { "data": "unit_name" },                  { "data": "ut_unit_sub_topic" },                  { "data": "as_apts_name" },                  {                      "data": "video_id",                      "render":function(data, type, row, meta){                          data = '<a href="<?=site_url();?>nautics/bankagent/view/' + data + '" class="btn btn-warning btn-xs" title="View"><i class="far fa-eye"></i></a>&nbsp;<a href="<?=site_url();?>nautics/bankagent/edit/' + data + '" class="btn btn-info btn-xs" title="Edit"><i class="far fa-edit"></i></a>&nbsp;<a href="javascript:feature_in_next_version();" class="btn btn-danger btn-xs" title="Delete"><i class="far fa-trash-alt"></i></a>';                          return data;                        }                  }                                  ],              "order": [[1, 'asc']],              select: true,              colReorder: true                        });                // Add event listener for opening and closing details          $('#manage_elvideos_table tbody').on('click', 'td.details-control', function () {              var tr = $(this).closest('tr');              var row = table.row( tr );                if ( row.child.isShown() ) {                  // This row is already open - close it                  row.child.hide();                  tr.removeClass('shown');              }              else {                  // Open this row                  row.child( format(row.data()) ).show();                  tr.addClass('shown');              }          } );                                      <table class="table table-striped table-bordered table-hover" id="manage_elvideos_table">                                  <thead>                                  <tr>                                      <th></th>                                      <th>Prog</th>                                      <th>Year</th>                                      <th>Course</th>                                      <th>Unit</th>                                      <th>Video On</th>                                      <th>Video By</th>                                      <th>Options</th>                                  </tr>                                  </thead>                                  <tfoot>                                      <tr>                                          <th></th>                                          <th>Prog</th>                                          <th>Year</th>                                          <th>Course</th>                                          <th>Unit</th>                                          <th>Video On</th>                                          <th>Video By</th>                                          <th>Options</th>                                      </tr>                                  </tfoot>                                                                  </table>  

Please advise what's wrong with my code.

https://stackoverflow.com/questions/67041015/requested-unknown-parameter-prog-name-for-row-0-in-data-table-error April 11, 2021 at 10:48AM