CODEWITHSUNDEEP
datatables
Alexander Farber
Alexander Farber

Reputation: 22978

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

Upvotes: 96

Views: 287419

Answers (12)

ezmilhouse
ezmilhouse

Reputation: 9121

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.

Upvotes: 3

Ananth
Ananth

Reputation: 1998

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.

Upvotes: 176

Flea
Flea

Reputation: 11284

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

Upvotes: 13

Suraj Sharma
Suraj Sharma

Reputation: 404

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.

Upvotes: 1

impiyush
impiyush

Reputation: 794

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.

Upvotes: 1

mohit sharma
mohit sharma

Reputation: 1070

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.

Upvotes: 5

Stachu
Stachu

Reputation: 5847

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.

Upvotes: 2

zerpsed
zerpsed

Reputation: 515

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.

Upvotes: 21

Krishna
Krishna

Reputation: 8496

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.

Upvotes: 5

Basheer AL-MOMANI
Basheer AL-MOMANI

Reputation: 15327

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

Upvotes: 4

Gyrocode.com
Gyrocode.com

Reputation: 58870

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.

Upvotes: 2

Bumptious Q Bangwhistle
Bumptious Q Bangwhistle

Reputation: 4759

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

Upvotes: 29

Related Questions