How to create jquery data table from JSON array without declaring columns

Question

I have following code which gets JSON from WebAPI.(for clarity of the question, I have defined the array as data from web API).

I need the data table to be dynamic and that's why I am creating the table headers at run time.

This works fine, but I do not see any data on data table and get the error:

DataTables warning: table id=tableId - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

var data = [{
        "Number": "10031",
        "Description": "GYPROCK PLUS RE 10MM 1200X4200",
        "FarmLocation": "WH5",
        "LocationIn": "LINE_1C2AA",
        "Quantity": 18
    },
    {
        "Number": "95844",
        "Description": "CEMINSEAL WALLBOARD RE 6MM 1350X3000",
        "FarmLocation": "WH5",
        "LocationIn": "LINE_1C2AB",
        "Quantity": 6
    }
];

var $thead = $('#tableId').find('thead');
var tr = $("<tr>");
$thead.append(tr);
$.each(data[0], function(name, value) {

    $(tr).append('<th>' + name + '</th>');
});

$('#tableId').DataTable({
    data: data,
});

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="tableId" class="table table-condensed responsive">
    <thead>
    </thead>
    <tbody>

    </tbody>
</table>

From the documentation: "The down side of using objects is that you need to explicitly tell DataTables which property it should use from the object for each column." — Andreas
– Andreas, Commented Jul 20, 2018 at 5:32
@VishnuBhadoriya, Not really, but If I don't provide column name then there is a different error for sorting — Simsons
– Simsons, Commented Jul 20, 2018 at 5:36

samabcde · Accepted Answer · 2018-07-20 05:47:39Z

    var data = [{
  "Number": "10031",
  "Description": "GYPROCK PLUS RE 10MM 1200X4200",
  "FarmLocation": "WH5",
  "LocationIn": "LINE_1C2AA",
  "Quantity": 18
}, {
  "Number": "95844",
  "Description": "CEMINSEAL WALLBOARD RE 6MM 1350X3000",
  "FarmLocation": "WH5",
  "LocationIn": "LINE_1C2AB",
  "Quantity": 6
}];

var $thead = $('#tableId').find('thead');
var tr = $("<tr>");
$thead.append(tr);
var columns = [];
$.each(data[0], function(name, value) {
  var column = {
    "data": name,
    "title":name
  };
  columns.push(column);
});

$('#tableId').DataTable({
  data: data,
  columns: columns
});

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="tableId" class="table table-condensed responsive">
		</table>

Maybe you can try to create the column from the data. However, if the data is updated, I suppose you need to refresh the table in same way

Bhushan Kawadkar · Accepted Answer · 2018-07-20 05:50:22Z

var data = [{
        "Number": "10031",
        "Description": "GYPROCK PLUS RE 10MM 1200X4200",
        "FarmLocation": "WH5",
        "LocationIn": "LINE_1C2AA",
        "Quantity": 18
    },
    {
        "Number": "95844",
        "Description": "CEMINSEAL WALLBOARD RE 6MM 1350X3000",
        "FarmLocation": "WH5",
        "LocationIn": "LINE_1C2AB",
        "Quantity": 6
    }
];

var headerData = data[0];
var columns = [];
var $thead = $('#tableId').find('thead');
var tr = $("<tr>");
$thead.append(tr);
$.each(headerData, function(name, value) {
    $(tr).append('<th>' + name + '</th>');
   var obj = {'data': name};
   columns.push(obj);
   });
$('#tableId').DataTable({
    data: data,
    "columns": columns
});

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="tableId" class="table table-condensed responsive">
    <thead>
    </thead>
    <tbody>
    </tbody>
</table>

davidkonrad · Accepted Answer · 2018-07-20 08:04:02Z

1

There is really no need for HTML manipulation or nasty jQuery. It can all be reduced to :

<table id="tableId"></table>

var table = $('#tableId').DataTable({
   data: data,
   columns: Object.keys(data[0]).map(function(item) {
     return { data: item, title: item }
   })
})

http://jsfiddle.net/pz5hjv84/

answered Jul 20, 2018 at 8:04

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

1 Comment

Eduardo Carvajal Over a year ago

it's the best answer for the question, great.

vikscool · Accepted Answer · 2018-07-20 06:31:18Z

it is throwing the error as it not able to identify the names of the columns. So, you have to set the columns property of the datatable.js in order to display the data.

Try the snippet below:

var data = [{
        "Number": "10031",
        "Description": "GYPROCK PLUS RE 10MM 1200X4200",
        "FarmLocation": "WH5",
        "LocationIn": "LINE_1C2AA",
        "Quantity": 18
    },
    {
        "Number": "95844",
        "Description": "CEMINSEAL WALLBOARD RE 6MM 1350X3000",
        "FarmLocation": "WH5",
        "LocationIn": "LINE_1C2AB",
        "Quantity": 6
    }
];
let columns=[];
var $thead = $('#tableId').find('thead');
var tr = $("<tr>");
$thead.append(tr);
$.each(data[0], function(name, value) {
    columns.push({data:name,name:name});
    $(tr).append('<th>' + name + '</th>');
});

$('#tableId').DataTable({
    data: data,
    "destroy": true,
    "columns":columns
});

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="tableId" class="table table-condensed responsive">
    <thead>
    </thead>
    <tbody>

    </tbody>
</table>

for more information about the columns property please go through this link: datatable.js's columns

Update 1 use of dynamic column header

the data option of the column property is used to map the column to the given input data whereas the name property is used to set the display name for the field. Later on, the destroy property is used to refresh the table. For further detail on destroy destroy.

Thanks vikscool, but the question clearly states , without declaring columns. In your answer you have declared columns

Collectives™ on Stack Overflow

How to create jquery data table from JSON array without declaring columns

4 Answers 4

Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related