'jquery dataTable TypeError: j[k] is undefined

I am using jquery dataTable for list of data. My issue is that when page it load is returnig TypeError: j[k] is undefined. My getStudentDataTable.json is not get loaded.

My Jquery code is like this : 

   $(document).ready(funDemo);
            function funDemo() {
                $('#listTable').dataTable({

                    "bProcessing": true,
                    "bServerSide": true,
                    "iDisplayLength": 10,
                    "sAjaxSource": "http://localhost/getStudentDataTable.json",
                    "aoColumns": [ 
                        {mData: "Student.id"},
                        {mData: "Student.stud_name"},
                        {mData: "Student.Roll_no"},


                    ],
                    "fnCreatedRow": function (nRow, aData, iDataIndex) {
                        $('td:eq(4)', nRow).html("<input onclick='return editContact(" + JSON.stringify(aData.Student) + ");' type='button' value='Edit'>");
                        $('td:eq(5)', nRow).html("<input onclick='return deleteContact(" + JSON.stringify(aData.Student) + ");' type='button' value='Delete'>");
                        //$('td:eq(4)', nRow).html('<a href="/contacts/view/'+aData.Contact.id+'">'+aData.Contact.email+'</a>');
                    }

                });
}

Json data : 

{
    "sEcho": 1,
    "iTotalRecords": 9,
    "iTotalDisplayRecords": 9,
    "aaData": [
        {
            "Contact": {
                "id": "2",
                "fname": "gaurav",
                "rollno": "201",

            }
        },

        {
            "Contact": {
                "id": "5",
                "fname": "abhishek",
                "rollno": "202",

            }
        }
    ]
}

Html table is defind : 

  <table id="listTable" border="1" cellpadding="5">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Stud name</th>
                        <th>roll no</th>
                        <th colspan='2'>Action</th>
                    </tr>
                </thead>
            </table>
jqueryjsonjquery-datatables


Solution 1:[1]

I got the same problem and spent almost 1 hour to fix it. Solution is very simple. I just had to add one column <td> to my HTML -> TABLE and issue got fixed.

Solution 2:[2]

<table id="listTable" border="1" cellpadding="5">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Stud name</th>
                        <th>roll no</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>

I have removed colspan.

Solution 3:[3]

I have the same problem, I just make sure the number of head and body column is the same. For example the targets dataTable does not exceed the number of column heads. enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 NullPointer
Solution 2 vnnotech
Solution 3 Tyler2P

Related Questions