Ammar Ibnu Ameerdeen Ammar Ibnu Ameerdeen - 3 months ago 8x
jQuery Question

rows().data() function is not returning an Array

I'm using DataTable.js version 1.10.7 in my application. My intention is to get an Array of row data that was added to the table after initiation. I have followed a modified version of steps as in this documentation -

<!-- this form is filled and form values are added the datatable on submission-->
<div class="col-md-4">
<form action="../api/MaterialInPurchaseOrders/Create" id="create-material-in-purchaseOrder" method="POST">
<div id="name-group" class="form-group">
<label for="name">Material Name</label>
<select name="MaterialId" class="form-control" id="MaterialList"></select>
<br />
<label for="email">Quantity</label>
<input type="number" class="form-control" name="Quantity" placeholder="eg :- 100">

<label for="email">Quantity</label>
<input type="number" class="form-control" name="Cost" placeholder="eg :- 100">
<button type="submit" class="btn btn-default">Add Material to P/O<span class="fa fa-arrow-right"></span></button>

<!-- this table stores the rows that is being added from the form-->
<div class="col-md-8">
<table id="materials-in-purchase-order" class="display" cellspacing="0" width="100%">
<th>Material Id</th>
<th>Material Name</th>
<th>Unit Cost</th>
<th>Material Id</th>
<th>Material Name</th>
<th>Unit Cost</th>

<button class="btn btn-success" id="get-table-data">Get Table Row Data</button>


// the Datatable handler
var materialsInPurchaseOrder = $("#materials-in-purchase-order").DataTable({
"dataSrc": "data",
"columns": [
{ "data": "MaterialId" },
{ "data": "MaterialName" },
{ "data": "Quantity" },
{ "data": "Cost" }

$(document).ready(function () {
// loading list boxes from database to an input selection list box in the form
loadListBox("../api/Materials/GetMaterials", "#MaterialList", "MaterialId", "MaterialName");

// on submission of the form the form values gets updated to the Datatable as a row.
$("#create-material-in-purchaseOrder").on("submit", function (event) {
var data = {};
data = getFormValues("#create-material-in-purchaseOrder");
$("#MaterialList option:selected").each(function () {
data["MaterialName"] = $(this).html();


$("#get-table-data").click(function (event) {
var materials = materialsInPurchaseOrder.rows().data();

// looping through each row of the array and doing something
for (var material in materials) {
// unable to do this because materials is not an array :(


I get the below output for the console.log() instead of an Array

[Object, context: Array[1], selector: Object, ajax: Object]

Some research I did,
jQuery DataTables - Access all rows data

How can I get an Array of DataTable row data.?


As per the documentation return type of rows().data() is DataTables.Api. Before print it with console.log first convert it to string using JSON.stringify(). Because DataTables.Api is an object.



As per the documentation of DataTables.Api type The API object is array-like

You can access data by row index as follows,


This returns data of first row.