DataTables warning: Requested unknown parameter '0' from the data source for row '0'

Does anybody please know, what is wrong with the very simple HTML file below?

enter image description here

I am just trying to use an array of objects as the data source for DataTables:

tests.html:

<html>
<head>
<link type="text/css" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<link type="text/css" rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.2/css/jquery.dataTables_themeroller.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.2/jquery.dataTables.min.js"></script>
<script type="text/javascript">


var data = [
{"Name":"UpdateBootProfile","Result":"PASS","ExecutionTime":"00:00:00","Measurement":[]},
{"Name":"NRB Boot","Result":"PASS","ExecutionTime":"00:00:50.5000000","Measurement":[{"TestName":"TOTAL_TURN_ON_TIME","Result":"PASS","Value":"50.5","LowerLimit":"NaN","UpperLimit":"NaN","ComparisonType":"nctLOG","Units":"SECONDS"}]},
{"Name":"NvMgrCommit","Result":"PASS","ExecutionTime":"00:00:00","Measurement":[]},
{"Name":"SyncNvToEFS","Result":"PASS","ExecutionTime":"00:00:01.2500000","Measurement":[]}
];


$(function() {
var testsTable = $('#tests').dataTable({
bJQueryUI: true,
aaData: data,
aoColumns: [
{ mData: 'Name' },
{ mData: 'Result' },
{ mData: 'ExecutionTime' }
]
});
});


</script>
</head>
<body>


<table id="tests">
<thead>
<tr>
<th>Name</th>
<th>Result</th>
<th>ExecutionTime</th>
</tr>
</thead>
<tbody>
</tbody>
</table>


</body>
</html>

UPDATE: Ok, I've got the answer from the author to use a newer version of DataTables or rename mData to mDataProp

226667 次浏览

You're using an array of objects. Can you use a two dimensional array instead?

http://www.datatables.net/examples/data_sources/js_array.html

See this jsfiddle: http://jsfiddle.net/QhYse/

I used an array like this and it worked fine:

var data = [
["UpdateBootProfile","PASS","00:00:00",[]] ,
["NRB Boot","PASS","00:00:50.5000000",[{"TestName":"TOTAL_TURN_ON_TIME","Result":"PASS","Value":"50.5","LowerLimit":"NaN","UpperLimit":"NaN","ComparisonType":"nctLOG","Units":"SECONDS"}]] ,
["NvMgrCommit","PASS","00:00:00",[]] ,
["SyncNvToEFS","PASS","00:00:01.2500000",[]]
];

Edit to include array of objects

There's a possible solution from this question: jQuery DataTables fnrender with objects

This jsfiddle http://jsfiddle.net/j2C7j/ uses an array of objects. To not get the error I had to pad it with 3 blank values - less than optimal, I know. You may find a better way with fnRender, please post if you do.

var data = [
["","","", {"Name":"UpdateBootProfile","Result":"PASS","ExecutionTime":"00:00:00","Measurement":[]} ]


];


$(function() {
var testsTable = $('#tests').dataTable({
bJQueryUI: true,
aaData: data,
aoColumns: [
{ mData: 'Name', "fnRender": function( oObj ) { return oObj.aData[3].Name}},
{ mData: 'Result' ,"fnRender": function( oObj ) { return oObj.aData[3].Result }},
{ mData: 'ExecutionTime',"fnRender": function( oObj ) { return oObj.aData[3].ExecutionTime } }
]
});
});

From DataTables website:

Each cell in DataTables requests data, and when DataTables tries to obtain data for a cell and is unable to do so, it will trigger a warning, telling you that data is not available where it was expected to be. The warning message is:

DataTables warning: table id={id} - Requested unknown parameter '{parameter}' for row {row-index}

where:

{id} is replaced with the DOM id of the table that has triggered the error

{parameter} is the name of the data parameter DataTables is requesting

{row-index} is the DataTables internal row index for the rwo that has triggered the error.

So to break it down, DataTables has requested data for a given row, of the {parameter} provided and there is no data there, or it is null or undefined.

See this tech note on DataTables web site for more information.

I was having the same problem. Turns out in my case, I was missing the comma after the last column. 30 minutes of my life wasted, I will never get back!

enter image description here

If you're using knockout.bindings.dataTables.js then you can edit the file and replace this line

dataTable.fnAddData(unwrappedItems);

with

if (unwrappedItems.length > 0) {
dataTable.fnAddData(unwrappedItems);
}

This has help me and i hope will help you.

For null or undefined value error, Just add this line to attributes : ,columnDefs: [ { "defaultContent": "-", "targets": "_all" } ]

Example :

oTable = $("#bigtable").dataTable({
columnDefs: [{
"defaultContent": "-",
"targets": "_all"
}]
});

The alert box will not show again, any empty values will be replaced with what you specified.

I face this issue because I messed return keyword in custom rendering in Columns section

columns: [
{....
'data': function(row, type, val, meta) {
if (row.LetterStatus)
return '@CultureHelper.GetCurrentCulture()' == 'ar'? row.LetterStatus.NameInArabic: row.LetterStatus.NameInEnglish;
else row.LetterStatusID.toString();// here is the problem because I messed the Return key keyword
},
......
}

the problem in my code is because I messed the Return keyword in the else clause

so I changed it to

....
else return row.LetterStatusID.toString();// messed return keyword added
.....

Make sure that the column names are the same. They are case sensitive. Here, in my case, i got this error when the column names of my model are in capitalzed and i used all the lower case letters in the data of ajax request.

So,i resolved by matching the column names exactly the same way as the existing model names.

DataTable Binding

$("#Customers").DataTable({
ajax: {
url: "/api/customers/",
dataSrc: ""
},
columns: [
{
data: "Name",
render: function (data, type, customer) {
return "<a href='/customers/edit/" + customer.Id + "'>" + customer.Name + "</a>";




}


},
{
data: "Name"
},
{
data: "Id",
render: function (data) {
return "<button class='btn-link js-delete' data-customer-id=" + data + ">Delete</button>";
}
}
]
});

Web API Method:

  public IEnumerable<Customer> GetCustomers()
{
return _context.Customers.ToList();


}

My Model:-

 public class Customer
{
public int Id { get; set; }


[Required]
[StringLength(255)]
public string Name { get; set; }


[Display(Name="Date Of Birth")]
public DateTime? BirthDate { get; set; }




public bool isSubscribedToNewsLetter { get; set; }


public MembershipType MembershipType { get; set; }


[Display(Name="Membership Type")]
[Required]
public byte MembershipTypeId { get; set; }
}

so here in my case, iam populating datatable with columns(Name,Name,Id).. iam duplicating the second column name to test.

This plagued me for over an hour.

If you're using the dataSrc option and column defs option, make sure they are in the correct locations. I had nested column defs in the ajax settings and lost way too much time figuring that out.

This is good:

good

This is not good:

enter image description here

Subtle difference, but real enough to cause hair loss.

In my weird scenario, I had a different column that didn't always return a value in the 'render' function. return null solved my issue.

This is a very common case in DataTables when it's not able to find the request field define in DataTable configuration.
For Example:

                "aoColumns": [{
mData: 'mobile', sWidth: "149px;"
}, {
mData: 'name', sWidth: "121px;"
}, {
mData: 'productName', sWidth: "116px;"
}
}];

Here, If DataTable doesn't receive above mentioned properties. It'll generate this warning:

DataTables warning: Requested unknown parameter '0' from the data source for row '0'

To overcome this you just need to simply set a default value in "aoColumns"

For Example:

  "aoColumns": [{
mData: 'mobile',sDefaultContent :  '',sWidth: "149px;"
}, {
mData: 'name',sDefaultContent :  '', sWidth: "121px;"
}, {
mData: 'productName',sDefaultContent :  '', sWidth: "116px;"
}
}];

sDefaultContent will supress the warning.
Note: This property could be changed based on version of dataTables you are using.

If someone is using the new DataTables (which is awesome btw) and want to use array of objects then you can do so easily with the columns option. Refer to the following link for an excellent example on this.

DataTables with Array of Objects

I was struggling with this for the past 2 days and this solved it. I didn't wanted to switch to multi-dimensional arrays for other code reasons so was looking for a solution like this.

it's 2022 and I just stumbled upon this problem, fortunately easy to solve.

The issue is (most probably) that your render function does not return anything useful, BUT it has to (in all cases):

columns : [


// ...


{
// wrong, no state no return value, the result is the
// warning pop up
render : function(data, type, row, meta) {
if (row.state) {
return 'State is ' + row.state
}
}
}


// ...


]

This makes it go away:

columns : [


// ...


{
// this covers all cases
render : function(data, type, row, meta) {
if (row.state) {
return 'State is ' + row.state
}
// in this example make sure that at least
// something is returned
return '';
}
}


// ...


]

Alternatively you can add defaultContent : '' to you column definition, same effect.