CODEWITHSUNDEEP
javascriptphpjqueryhtmldatatables
Yasiru Nayanajith
Yasiru Nayanajith

Reputation: 1737

jQuery DataTable Row Details gives "data is undefined"

I was using jQuery Data Tables to create a datatable with row details. But after implementing it as in the documentation, it gives an error on jquerydatatables.js:

data is undefined

JavaScript code:

$(document).ready(function() {
  var dt = $('#tbl_cheque_history').DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": "../lib/load-history.php",
    "columns": [{
        "class": "details-control",
        "orderable": false,
        "data": null,
        "defaultContent": ""
      },
      {"data": "bank_name"},
      {"data": "account_number"},
      {"data": "amount"},
      {"data": "printed_date"},
      {"data": "cheque_number"}
    ],
    "order": [[1, 'asc']]
  });

  var detailRows = [];

  $('#tbl_cheque_history tbody').on('click', 'tr td.details-control', function() {
    var tr = $(this).closest('tr');
    var row = dt.row(tr);
    var idx = $.inArray(tr.attr('id'), detailRows);

    if (row.child.isShown()) {
      tr.removeClass('details');
      row.child.hide();

      // Remove from the 'open' array
      detailRows.splice(idx, 1);
    } else {
      tr.addClass('details');
      row.child(format(row.data())).show();

      // Add to the 'open' array
      if (idx === -1) {
        detailRows.push(tr.attr('id'));
      }
    }
  });

  dt.on('draw', function() {
    $.each(detailRows, function(i, id) {
      $('#' + id + ' td.details-control').trigger('click');
    });
  });

  function format(d) {
    return '<div class="details-container">' +
      '<table cellpadding="5" cellspacing="0" border="0"   class="details-table">' +
      '<tr>' +
      '<td class="title">Person ID:</td>' +
      '<td>' + d.bank_name + '</td>' +
      '</tr>' +
      '<tr>' +
      '<td class="title">Name:</td>' +
      '<td>' + d.account_number + '</td>' +
      '<td class="title">Email:</td>' +
      '<td>' + d.amount + '</td>' +
      '</tr>' +
      '<tr>' +
      '<td class="title">Country:</td>' +
      '<td>' + d.printed_date + '</td>' +
      '<td class="title">IP Address:</td>' +
      '<td>' + d.check_number + '</td>' +
      '</tr>' +
      '</table>' +
      '</div>';
  };
});

My PHP:

<?php
session_start();
require("connection.php");

$dbobj = new dbconnection();
$con   = $dbobj->getcon();

$sql_get_history     = "SELECT bank.bank_name, bank_account.account_no, history.language, history.payee, history.amount, history.cheque_date, history.printed_date, history.printed_time, history.cheque_no, history.crossed, history.ac_payee, history.bearer FROM history, bank_account, bank ,layout WHERE layout.layout_id = history.layout_id AND layout.bank_account_id = bank_account.account_id AND bank_account.bank_id = bank.bank_id AND history.customer_id='$_SESSION[CusID]' ORDER BY history.history_id DESC";
$res_sql_get_history = mysqli_query($con, $sql_get_history);
if (mysqli_num_rows($res_sql_get_history) > 0) {
    $array_history = array();
    while ($row_history = mysqli_fetch_array($res_sql_get_history)) {
        array_push($array_history, $row_history);
    }
    echo json_encode($array_history);
}
$dbobj->close();
?>

HTML Code:

<table id="tbl_cheque_history" class="table table-striped table-no-bordered table-hover dataTable dtr-inline">
   <thead>
      <tr role="row">
         <th><b>Bank</b></th>
         <th><b>Account Number</b></th>
         <th><b>Amount</b></th>
         <th><b>Printed Date</b></th>
         <th><b>Check Number</b></th>
         <th><b>Actions</b></th>
      </tr>
   </thead>
</table>

My Error:

data is undefined error in console

Can anyone help me to implement this? I have no idea how this happens. I have many columns that should appear, but with the normal data table the space is not enough, that's why I choose apply row details.

Upvotes: 3

Views: 1025

Answers (1)

WilliamNHarvey
WilliamNHarvey

Reputation: 2485

Your php is outputting a plain array rather than how DataTables expects it to. https://www.datatables.net/examples/data_sources/ajax.html

You can set dataSrc to change how DataTables expects your ajax response to look.

"ajax": {
  "url": "../lib/load-history.php",
  "dataSrc": ""
}

An empty string makes it expect a plain array rather than an array in an object under data

Upvotes: 2

Related Questions