Datatables Cannot read property mData of undefined

Question

I have an issue with Datatables  I also went through this link which didn t yield any results  I have included all the prerequisites where I m parsing data directly into the DOM  Kindly help me to fix this issue    Script    document  ready function           viewCentricPage  teamCentric   dataTable        bJQueryUI   true       sPaginationType    full numbers        bPaginate   false       bFilter   true       bSort   true       aaSorting            1   asc               aoColumnDefs             bSortable   false         aTargets    0                  bSortable   true         aTargets    1                  bSortable   false         aTargets    2

User · Answer

Slightly different problem for me from the answers given above. For me, the HTML markup was fine, but one of my columns in the javascript was missing and didn't match the html.

i.e.

<table id="companies-index-table" class="table table-responsive-sm table-striped">

                            <thead>
                            <tr>
                                <th>Id</th>
                                <th>Name</th>
                                <th>Created at</th>
                                <th>Updated at</th>
                                <th>Count</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($companies as $company)
                                <tr>
                                    <td>{{ $company->id }}</td>
                                    <td>{{ $company->name }}</td>
                                    <td>{{ $company->created_at }}</td>
                                    <td>{{ $company->updated_at }}</td>
                                    <td>{{ $company->count }}</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>

My Script:-

<script>
        $(document).ready(function() {
            $('#companies-index-table').DataTable({
                serverSide: true,
                processing: true,
                responsive: true,
                    ajax: "{{ route('admincompanies.datatables') }}",
                columns: [
                    { name: 'id' },
                    { name: 'name' },
                    { name: 'created_at' },
                    { name: 'updated_at' },     <-- I was missing this line so my columns didn't match the thead section.
                    { name: 'count', orderable: false },
                ],
            });
        });
    </script>

User · Answer

This one drove me crazy - how to render a DataTable successfully in a  NET MVC view  This worked        model List lt Student gt          ViewData  Title      Index       lt h2 gt NEW VIEW Index lt  h2 gt    lt table id  example  class  display  style  width 100   gt      lt thead gt      lt tr gt      lt th gt ID lt  th gt       lt th gt Firstname lt  th gt       lt th gt Lastname lt  th gt      lt  tr gt     lt  thead gt     lt tbody gt   foreach  var element in Model         lt tr gt       lt td gt  Html DisplayFor m   gt  element ID  lt  td gt       lt td gt  Html DisplayFor m   gt  element FirstName  lt  td gt       lt td gt  Html DisplayFor m   gt  element LastName  lt  td gt       lt  tr gt      lt  tbody gt   lt  table gt      Script in JS file        document  ready function              example   DataTable

User · Answer

You have to remove your colspan and the number of th  and td needs to match

User · Answer

In my case  and using ASP NET GridView  UpdatePanel and with DropDownList  with Chosen plugin where I reset value to zero using a Javascript line   I got this error and tried everything with no hope for days  The problem was that the code of my dropdown in code behind was as follows and when I select a value twice to apply its action to selected grid rows I get that error  I thought for days it s a Javascript issue  again  in my case   and finally the fix was giving zero for the drowpdown value with the update process     private void ddlTasks SelectedIndexChanged object sender  System EventArgs e           if  ddlTasks SelectedValue    0            ChangeStatus ddlTasks SelectedValue           ddlTasks SelectedValue    0          This fixed my issue                dvItemsGrid DataSource   CreateDatasource         dvItemsGrid DataBind         dvItemsGrid UseAccessibleHeader   true       dvItemsGrid HeaderRow TableSection   TableRowSection TableHeader         This was my fault             lt    DropDownList ClientID  gt    val  0   trigger  chosen updated   chosen

User · Answer

One more reason why this happens is because of the columns parameter in the DataTable initialization   The number of columns has to match with headers   columns                         width     30                                     width     15                                     width     15                                     width     30                     I had 7 columns   lt th gt Full Name lt  th gt   lt th gt Phone Number lt  th gt   lt th gt Vehicle lt  th gt   lt th gt Home Location lt  th gt   lt th gt Tags lt  th gt   lt th gt Current Location lt  th gt   lt th gt Serving Route lt  th gt

User · Answer

Tips 1   Refer to this Link you get some Ideas   https   datatables net forums discussion 20273 uncaught-typeerror-cannot-read-property-mdata-of-undefined  Tips 2      Check following is correct     Please check the Jquery Vesion Please check the versiion of yours CDN or your local datatable related  min  amp  css files your table have  lt thead gt  lt  thead gt   amp   lt tbody gt  lt  tbody gt  tags Your table Header Columns Length same like Body Columns Length Your Using some cloumns in style  display none  as same propery apply in you both Header  amp  body  your table columns no empty  use something like   Null  --  NA  Nil   Your table is well one with out  lt td gt    lt tr gt  issue

User · Answer

I faced the same error  when tried to add colspan to last th  lt table gt     lt thead gt       lt tr gt             lt th gt  amp nbsp  lt  th gt   lt  -- column 1 -- gt         lt th colspan  quot 2 quot  gt  amp nbsp  lt  th gt   lt  -- column 2 amp 3 -- gt       lt  tr gt     lt  thead gt      lt tbody gt       lt tr gt         lt td gt  amp nbsp  lt  td gt         lt td gt  amp nbsp  lt  td gt         lt td gt  amp nbsp  lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt   and solved it by adding hidden column to the end of tr  lt thead gt     lt tr gt           lt th gt  amp nbsp  lt  th gt   lt  -- column 1 -- gt       lt th colspan  quot 2 quot  gt  amp nbsp  lt  th gt   lt  -- column 2 amp 3 -- gt        lt  -- hidden column 4 for proper DataTable applying -- gt       lt th style  quot display  none quot  gt  lt  th gt      lt  tr gt   lt  thead gt    lt tbody gt     lt tr gt       lt td gt  amp nbsp  lt  td gt       lt td gt  amp nbsp  lt  td gt       lt td gt  amp nbsp  lt  td gt        lt  -- hidden column 4 for proper DataTable applying -- gt       lt td style  quot display  none quot  gt  lt  td gt     lt  tr gt   lt  tbody gt   Explanaition to that is that for some reason DataTable can t be applied to table with colspan in the last th  but can be applied  if colspan used in any middle th  This solution is a bit hacky  but simpler and shorter than any other solution I found  I hope that will help someone

User · Answer

You need to wrap your your rows in  lt thead gt  for the column headers and  lt tbody gt  for the rows  Also ensure that you have matching no  of column headers  lt th gt  as you do for the td

User · Answer

FYI dataTables requires a well formed table  It must contain  lt thead gt  and  lt tbody gt  tags  otherwise it throws this error  Also check to make sure all your rows including header row have the same number of columns   The following will throw error  no  lt thead gt  and  lt tbody gt  tags    lt table id  sample-table  gt       lt tr gt           lt th gt title-1 lt  th gt           lt th gt title-2 lt  th gt       lt  tr gt       lt tr gt           lt td gt data-1 lt  td gt           lt td gt data-2 lt  td gt       lt  tr gt   lt  table gt    The following will also throw an error  unequal number of columns    lt table id  sample-table  gt       lt thead gt           lt tr gt               lt th gt title-1 lt  th gt               lt th gt title-2 lt  th gt           lt  tr gt       lt  thead gt       lt tbody gt           lt tr gt               lt td gt data-1 lt  td gt               lt td gt data-2 lt  td gt               lt td gt data-3 lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt    For more info read more here

User · Answer

I had a dynamically generated  but badly formed table with a typo  I copied a  lt td gt  tag inside another  lt td gt  by mistake  My column count matched  I had  lt thead gt  and  lt tbody gt  tags  Everything matched  except for this little mistake I didn t notice for a while  because my column had a lot of link and image tags in it

User · Answer

Having  lt thead gt  and  lt tbody gt  with the same numbers of  lt th gt  and  lt td gt  solved my problem

User · Answer

in my case the cause of this error is i have 2 tables that have same id name with different table structure  because of my habit of copy-paste table code  please make sure you have different id for each table    x000D   x000D   lt table id  tabel data  gt  x000D       lt thead gt  x000D           lt tr gt  x000D               lt th gt heading 1 lt  th gt  x000D               lt th gt heading 2 lt  th gt  x000D               lt th gt heading 3 lt  th gt  x000D               lt th gt heading 4 lt  th gt  x000D               lt th gt heading 5 lt  th gt  x000D           lt  tr gt  x000D       lt  thead gt  x000D       lt tbody gt  x000D           lt tr gt  x000D               lt td gt data-1 lt  td gt  x000D               lt td gt data-2 lt  td gt  x000D               lt td gt data-3 lt  td gt  x000D               lt td gt data-4 lt  td gt  x000D               lt td gt data-5 lt  td gt  x000D           lt  tr gt  x000D       lt  tbody gt  x000D   lt  table gt  x000D   x000D   lt table id  tabel data  gt  x000D       lt thead gt  x000D           lt tr gt  x000D               lt th gt heading 1 lt  th gt  x000D               lt th gt heading 2 lt  th gt  x000D               lt th gt heading 3 lt  th gt  x000D           lt  tr gt  x000D       lt  thead gt  x000D       lt tbody gt  x000D           lt tr gt  x000D               lt td gt data-1 lt  td gt  x000D               lt td gt data-2 lt  td gt  x000D               lt td gt data-3 lt  td gt  x000D           lt  tr gt  x000D       lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

in my case this error occured  if i use table without header                 lt thead gt                      lt tr gt                          lt th gt example lt  th gt                     lt  tr gt                 lt  thead gt

User · Answer

I had encountered the same issue but I was generating table Dynamically  In my case  my table had missing  lt thead gt  and  lt tbody gt  tags   here is my code snippet if it helped somebody       table string    var strDiv     lt table id  tbl  class  striped center responsive-table  gt          add headers    var strTable      lt thead gt  lt tr id  tableHeader  gt  lt th gt Customer Name lt  th gt  lt th gt Customer Designation lt  th gt  lt th gt Customer Email lt  th gt  lt th gt Customer Organization lt  th gt  lt th gt Customer Department lt  th gt  lt th gt Customer ContactNo lt  th gt  lt th gt Customer Mobile lt  th gt  lt th gt Cluster Name lt  th gt  lt th gt Product Name lt  th gt  lt th gt  Installed Version lt  th gt  lt th gt Requirements lt  th gt  lt th gt Challenges lt  th gt  lt th gt Future Expansion lt  th gt  lt th gt Comments lt  th gt  lt  tr gt   lt  thead gt   lt tbody gt          add data     each data  function  key  GetCustomerFeedbackBE                                strTable   strTable     lt tr gt  lt td gt     GetCustomerFeedbackBE StrCustName     lt  td gt  lt td gt     GetCustomerFeedbackBE StrCustDesignation     lt  td gt  lt td gt     GetCustomerFeedbackBE StrCustEmail     lt  td gt  lt td gt     GetCustomerFeedbackBE StrCustOrganization     lt  td gt  lt td gt     GetCustomerFeedbackBE StrCustDepartment     lt  td gt  lt td gt     GetCustomerFeedbackBE StrCustContactNo     lt  td gt  lt td gt     GetCustomerFeedbackBE StrCustMobile     lt  td gt  lt td gt     GetCustomerFeedbackBE StrClusterName     lt  td gt  lt td gt     GetCustomerFeedbackBE StrProductName     lt  td gt  lt td gt     GetCustomerFeedbackBE StrInstalledVersion     lt  td gt  lt td gt     GetCustomerFeedbackBE StrRequirements     lt  td gt  lt td gt     GetCustomerFeedbackBE StrChallenges     lt  td gt  lt td gt     GetCustomerFeedbackBE StrFutureExpansion     lt  td gt  lt td gt     GetCustomerFeedbackBE StrComments     lt  td gt  lt  tr gt                                   add end of tbody  strTable   strTable     lt  tbody gt  lt  table gt       insert table into a div                         divCFB D   html strDiv          tbl   html strTable           finally add export buttons         tbl   DataTable                               dom   Bfrtip                               buttons                                     copy    csv    excel    pdf    print

User · Answer

I am getting a similar error  The problem is that the header line is not correct  When I did the following header line  the problem I was having was resolved   lt table id  quot example quot  class  quot table table-striped table-bordered quot  style  quot width 100  quot  gt           lt thead gt       lt tr gt                   lt th colspan  quot 6 quot  gt Common Title lt  th gt               lt  tr gt               lt tr gt                   lt th gt Name lt  th gt                   lt th gt Position lt  th gt                   lt th gt Office lt  th gt                   lt th gt Age lt  th gt                   lt th gt Start date lt  th gt                   lt th gt Salary lt  th gt               lt  tr gt           lt  thead gt           lt tbody gt               lt tr gt                   lt td gt Tiger Nixon lt  td gt                   lt td gt System Architect lt  td gt                   lt td gt Edinburgh lt  td gt                   lt td gt 61 lt  td gt                   lt td gt 2011 04 25 lt  td gt                   lt td gt  320 800 lt  td gt               lt  tr gt   lt  tbody gt   lt  table gt

User · Answer

I had this same problem using DOM data in a Rails view created via the scaffold generator   By default the view omits  lt th gt  elements for the last three columns  which contain links to show  hide  and destroy records    I found that if I added in titles for those columns in a  lt th gt  element within the  lt thead gt  that it fixed the problem     I can t say if this is the same problem you re having since I can t see your html   If it is not the same problem  you can use the chrome debugger to figure out which column it is erroring out on by clicking on the error in the console  which will take you to the code it is failing on   then adding a conditional breakpoint  at col  undefined    When it stops you can check the variable i to see which column it is currently on which can help you figure out what is different about that column from the others   Hope that helps

User · Answer

In addition to inconsistent  and  numbers  a missing item inside datatable scripts columns part can cause this too  Correcting that fixed my datatables search bar   I m talking about this part    columns       null                null                 I struggled with this error till I was pointed that this part had one less  null  than my total thead count

User · Answer

This can also occur if you have table arguments for things like  aoColumns       which don t match the correct number of columns  Problems like this can commonly occur when copy pasting code from other pages to quick start your datatables integration   Example   This won t work    lt table id  dtable  gt       lt thead gt           lt tr gt               lt th gt col 1 lt  th gt               lt th gt col 2 lt  th gt           lt  tr gt       lt  thead gt       lt tbody gt           lt td gt data 1 lt  td gt           lt td gt data 2 lt  td gt       lt  tbody gt   lt  table gt   lt script gt          var dTable       dtable            dTable DataTable                order      1   desc                   aoColumns                     null                  null                  null                  null                  null                  null                                         bSortable   false                                              lt  script gt    But this will work    lt table id  dtable  gt       lt thead gt           lt tr gt               lt th gt col 1 lt  th gt               lt th gt col 2 lt  th gt           lt  tr gt       lt  thead gt       lt tbody gt           lt td gt data 1 lt  td gt           lt td gt data 2 lt  td gt       lt  tbody gt   lt  table gt   lt script gt          var dTable       dtable            dTable DataTable                order      0   desc                   aoColumns                     null                                         bSortable   false                                              lt  script gt

User · Answer

A common cause for Cannot read property  fnSetData  of undefined is the mismatched number of columns  like in this erroneous code    lt thead gt                   lt  -- thead required -- gt       lt tr gt                  lt  -- tr required -- gt           lt th gt Rep lt  th gt      lt  -- td instead of th will also work -- gt           lt th gt Titel lt  th gt                           lt  -- th missing here -- gt       lt  tr gt   lt  thead gt   lt tbody gt       lt tr gt           lt td gt Rep lt  td gt           lt td gt Titel lt  td gt           lt td gt Missing corresponding th lt  td gt       lt  tr gt   lt  tbody gt    While the following code with one  lt th gt  per  lt td gt   number of columns must match  works    lt thead gt       lt tr gt           lt th gt Rep lt  th gt         lt  -- 1st column -- gt           lt th gt Titel lt  th gt       lt  -- 2nd column -- gt           lt th gt Added th lt  th gt    lt  -- 3rd column  th added here -- gt       lt  tr gt   lt  thead gt   lt tbody gt       lt tr gt           lt td gt Rep lt  td gt               lt  -- 1st column -- gt           lt td gt Titel lt  td gt             lt  -- 2nd column -- gt           lt td gt th now present lt  td gt    lt  -- 3rd column -- gt       lt  tr gt   lt  tbody gt    The error also appears when using a well-formed thead with a colspan but without a second row   For a table with 7 colums  the following does not work and we see  Cannot read property  mData  of undefined  in the javascript console    lt thead gt       lt tr gt           lt th gt Rep lt  th gt           lt th gt Titel lt  th gt           lt th colspan  5  gt Download lt  th gt       lt  tr gt   lt  thead gt    While this works    lt thead gt       lt tr gt           lt th rowspan  2  gt Rep lt  th gt           lt th rowspan  2  gt Titel lt  th gt           lt th colspan  5  gt Download lt  th gt       lt  tr gt       lt tr gt           lt th gt pdf lt  th gt           lt th gt nwc lt  th gt           lt th gt nwctxt lt  th gt           lt th gt mid lt  th gt           lt th gt xml lt  th gt       lt  tr gt   lt  thead gt

User · Answer

I may be arising by aoColumns field  As stated HERE     aoColumns  If specified  then the length of this array must be equal   to the number of columns in the original HTML table  Use  null  where   you wish to use only the default values and automatically detected   options    Then you have to add fields as in table Columns       aoColumnDefs        null      null      null         bSortable   false        null

User · Answer

I found some  solution    This code doesn t work    lt table gt   lt thead gt       lt tr gt           lt th colspan  3  gt Test lt  th gt       lt  tr gt   lt  thead gt   lt tbody gt       lt tr gt           lt td gt 1 lt  td gt           lt td gt 2 lt  td gt           lt td gt 3 lt  td gt       lt  tr gt   lt  tbody gt      But this is ok    lt table gt   lt thead gt       lt tr gt           lt th colspan  2  gt Test lt  th gt           lt th gt  lt  th gt       lt  tr gt   lt  thead gt   lt tbody gt       lt tr gt           lt td gt 1 lt  td gt           lt td gt 2 lt  td gt           lt td gt 3 lt  td gt       lt  tr gt   lt  tbody gt      I think  that the problem is  that the last TH can t have attribute colspan

[jquery] Datatables: Cannot read property 'mData' of undefined

Examples related to jquery

Examples related to console

Examples related to datatables