CODEWITHSUNDEEP
jqueryjsondatatables
vnnotech
vnnotech

Reputation: 35

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>

Upvotes: 1

Views: 10562

Answers (4)

guruDM
guruDM

Reputation: 1

In my case the issue was the dataSrc variable in ajax definition name, mismatch with the returned json name in my controller class. For example:

echo json_encode(['status' => true, 'data' => $taskList]);

Ensure in you ajax you refer to data as the dataSrc

Upvotes: 0

cha rani
cha rani

Reputation: 31

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

Upvotes: 1

Smile
Smile

Reputation: 2768

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.

Upvotes: 6

vnnotech
vnnotech

Reputation: 35

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

Upvotes: 0

Related Questions