Does anybody please know, what is wrong with the very simple HTML file below?
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
This question is related to
jquery-datatables
The answer is
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.
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.
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:
This is not good:
Subtle difference, but real enough to cause hair loss.
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!
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.
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.
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.
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
.....
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 isnullorundefined.
See this tech note on DataTables web site for more information.
Source: Stackoverflow.com