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

走远了吗. 提交于 2019-12-28 01:49:12

问题


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


回答1:


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 } }
                ]
        });
});



回答2:


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.




回答3:


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.




回答4:


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!




回答5:


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.




回答6:


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.




回答7:


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
.....



回答8:


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.




回答9:


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.




回答10:


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.




回答11:


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.



来源:https://stackoverflow.com/questions/16539578/datatables-warning-requested-unknown-parameter-0-from-the-data-source-for-row

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!