DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

TypeError: Cannot read property 'mData' of undefined

TypeError: Cannot read property 'mData' of undefined

cratagcratag Posts: 10Questions: 3Answers: 0
in DataTables 1.10

I have this error:
TypeError: Cannot read property 'mData' of undefined

I've read it might be because the table has no thead or tbody, or because the amount of <th>'s do not correspond with the amount of <tr>

but this doesn't seem to be the case:

<table class="table table-sm table-dashboard data-table no-wrap mb-0 fs--1 w-100">
  <thead class="bg-table">
    <tr>
      <th class="sort">Plant ID</th>
      <th class="sort">Vector</th>
      <th class="sort">Genes targeted</th>
      <th class="sort">Sibling plants</th>
    </tr>
  </thead>
  <tbody class="bg-white">                    
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data2</td>
      <td>Data</td>
    </tr>
  </tbody>
  <tfoot class="bg-table">
    <tr>
      <th>Plant ID</th>
      <th>Vector</th>
      <th>Genes targeted</th>
      <th>Sibling plants</th>
    </tr>
  </tfoot>
</table>
...
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/responsive/2.2.7/js/dataTables.responsive.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.7/css/responsive.dataTables.min.css">
  <script type="text/javascript">
    setTimeout(function(){
      $('table').DataTable({
        rowReorder: {
          selector: 'td:nth-child(2)'
      },
      responsive: true 
    });
      }, 500);
  </script>

Error log:

jquery.dataTables.js:1176 Uncaught TypeError: Cannot read property 'mData' of undefined
    at HTMLTableCellElement.<anonymous> (jquery.dataTables.js:1176)
    at Function.each (core.js:209)
    at ./node_modules/jquery/src/core/init.js.jQuery.fn.init.each (core.js:49)
    at HTMLTableElement.<anonymous> (jquery.dataTables.js:1173)
    at Function.each (core.js:209)
    at ./node_modules/jquery/src/core/init.js.jQuery.fn.init.each (core.js:49)
    at ./node_modules/jquery/src/core/init.js.jQuery.fn.init.DataTable [as dataTable] (jquery.dataTables.js:869)
    at ./node_modules/jquery/src/core/init.js.jQuery.fn.init.$.fn.DataTable (jquery.dataTables.js:15214)
    at plants:134
(anonymous) @ jquery.dataTables.js:1176
each @ core.js:209
each @ core.js:49
(anonymous) @ jquery.dataTables.js:1173
each @ core.js:209
each @ core.js:49
DataTable @ jquery.dataTables.js:869
$.fn.DataTable @ jquery.dataTables.js:15214
(anonymous) @ plants:134
setTimeout (async)
(anonymous) @ plants:133

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    You weren't specifying the correct sources. I used the Download page, and this gave this example which is working as expected,

    Colin

  • cratagcratag Posts: 10Questions: 3Answers: 0

    Error persists

    Full code:

    <html>
  <head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.24/r-2.2.7/rr-1.2.7/datatables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.24/r-2.2.7/rr-1.2.7/datatables.min.js"></script>

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">

<table class="table table-sm table-dashboard data-table no-wrap mb-0 fs--1 w-100">
  <thead class="bg-table">
    <tr>
      <th class="sort">Plant ID</th>
      <th class="sort">Vector</th>
      <th class="sort">Genes targeted</th>
      <th class="sort">Sibling plants</th>
    </tr>
  </thead>
  <tbody class="bg-white">                   
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data2</td>
      <td>Data</td>
    </tr>
  </tbody>
  <tfoot class="bg-table">
    <tr>
      <th>Plant ID</th>
      <th>Vector</th>
      <th>Genes targeted</th>
      <th>Sibling plants</th>
    </tr>
  </tfoot>
</table>      

    </div>
  </body>
</html>

<script>
$(document).ready( function () {
    setTimeout(function(){
      $('table').DataTable({
        rowReorder: {
          selector: 'td:nth-child(2)'
      },
      responsive: true
    });
      }, 500);
} );
</script>
  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin

    Your code - a direct copy and paste, appears to work okay here: http://live.datatables.net/tawujaqu/1/edit .

    Allan

  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin

    Btw - the error you are seeing is normally due to a mis-match in columns, be it in the thead, tbody or in the columns array.

    Allan

  • cratagcratag Posts: 10Questions: 3Answers: 0
    edited April 2021

    My mistake was in the Datatables initialisation:

    I thought using "table" would take the DOM element <table>

    <script>
$(document).ready( function () {
      $('table').DataTable({
      responsive: true
    });
} );
</script>

    it works with a class:

    <html>
  <head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.24/r-2.2.7/rr-1.2.7/datatables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.24/r-2.2.7/rr-1.2.7/datatables.min.js"></script>

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">

<table class="sampletable">
  <thead class="bg-table">
    <tr>
      <th class="sort">Plant ID</th>
      <th class="sort">Vector</th>
      <th class="sort">Genes targeted</th>
      <th class="sort">Sibling plants</th>
    </tr>
  </thead>
  <tbody class="bg-white">                  
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data2</td>
      <td>Data</td>
    </tr>
  </tbody>
  <tfoot class="bg-table">
    <tr>
      <th>Plant ID</th>
      <th>Vector</th>
      <th>Genes targeted</th>
      <th>Sibling plants</th>
    </tr>
  </tfoot>
</table>     

    </div>
  </body>
</html>

<script>
$(document).ready( function () {
    setTimeout(function(){
      $('.sampletable').DataTable({
      responsive: true
    });
      }, 500);
} );
</script>

    Maybe only rails shows this as an error.

  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin
    edited April 2021

    I thought using "table" would take the DOM element <table>

    It will do, as shown in my example. Perhaps you had another table on the page which was causing issues. Either way, good to hear you got it fixed.

    Allan

  • cratagcratag Posts: 10Questions: 3Answers: 0

    I didn't have another <table> tag, but it had a table class in that tag, as such:

    <table class="table">

    maybe that triggered the error- Thank you for your help!

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.