Cannot read property 'fnSetData' of undefined

 

I have a Jquery Datatable in one of my MVC view. When I tried to load the Datatable I got the following error.

Cannot read property 'fnSetData' of undefined

Problem in my case was my table header and the table body content was not matching.

ex:

 <table cellpadding="0" cellspacing="0" border="0" class="display" id="TBL_WorkAreaManagementSearchResults" style="width: 100%">
                        <thead>
                            <tr>
                                <th></th>
                                <th>WorkArea</th>
                                <th>Region</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var workArea in Model)
                            {
                                <tr>
                                     <td style="cursor: pointer;">
                                        <a href="javascript:new RegionWorkAreaManagement().OurworkplaceManagement(@workArea.Id, @((int)WorkplaceConfigurationType.WorkArea))">Workplace</a>
                                    </td>
                                     
                                    <td>
                                        @workArea.Name
                                    </td>
                                    <td>
                                     @workArea.Region.Name
                                    </td>
                                 <td>
                                        @workArea.Code
                                    </td>
                                </tr>  
                            }
                        </tbody>
                    </table>

Here as you can see I have defibed 3 columns in the header and have 4 columns in the table body. Because of this mismatch jquery datatble was giving the error above. When the table header and body has similar number of columns issue got solved.

Hope this will help.

Happy Coding !!!!!!