2

I am trying to use datatables, but keep getting an mdata error.

Uncaught TypeError: Cannot read property 'mData' of undefined

jQuery.Deferred exception: Cannot read property 'mData' of undefined TypeError: Cannot read property 'mData' of undefined

Here is my html and jq. I have the same number of ths and tds. What am I missing?

    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/datatables.min.js"></script>
    <script>
    $(document).ready(function(){
		$('#seats').DataTable( {
        		"order": [[ 1, "desc" ]]
    		} );
    </script>
   <html>
    <head>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/datatables.min.css"/>
    <body>

    <div class="container">
    <table class="table table-hover" id="seats">
			<thread>
				<tr>
					<th>Seat Number</th>
					<th>Full Name</th>
					<th>Status and Level</th>
				</tr>
			</thread>
                        <tbody>
                           <tr><td class='one'>1</td><td class='two'>NAME1</td><td class='three'>...</td></tr>
                           <tr><td class='one'>106</td><td class='two'>NAME2</td><td class='three'>...</td></tr>
                           <tr><td class='one'>107</td><td class='two'>NAME3</td><td class='three'>...</td></tr>
                           <tr><td class='one'>113</td><td class='two'>NAME4</td><td class='three'>...</td></tr>
    </tbody></table></div>
    </body></html>

Improve this question

2 Answers 2

Reset to default
1

You are ordering by column with index 3 ie 4th column

Since you don't have a 4th column, datatable is giving you the following error.

jQuery.Deferred exception: Cannot read property 'aDataSort' of undefined TypeError: Cannot read property 'aDataSort' of undefined


$(document).ready(function(){
    $('#seats').DataTable( {
            "order": [[ 2, "desc" ]]
        } );
        });
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/datatables.min.css"/>
<body>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/datatables.min.js"></script>
<div class="container">
<table class="table table-hover" id="seats">
        <thead>
            <tr>
                <th>Seat Number</th>
                <th>Full Name</th>
                <th>Status and Level</th>
            </tr>
        </thead>
        <tbody>
                       <tr><td class='one'>1</td><td class='two'>NAME1</td><td class='three'>...</td></tr>
                       <tr><td class='one'>106</td><td class='two'>NAME2</td><td class='three'>...</td></tr>
                       <tr><td class='one'>107</td><td class='two'>NAME3</td><td class='three'>...</td></tr>
                       <tr><td class='one'>113</td><td class='two'>NAME4</td><td class='three'>...</td></tr>
</tbody></table></div>
</body>
</html>

For updated question

  • You haven't closed the $(document).ready function correctly
  • You have used thread instead of thead

Make those changes, and the code will start working.

$(document).ready(function() {
  $('#seats').DataTable({
    "order": [
      [1, "desc"]
    ]
  });
});
<html>

<head>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/datatables.min.css" />
  <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/datatables.min.js"></script>

  <body>

    <div class="container">
      <table class="table table-hover" id="seats">
        <thead>
          <tr>
            <th>Seat Number</th>
            <th>Full Name</th>
            <th>Status and Level</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class='one'>1</td>
            <td class='two'>NAME1</td>
            <td class='three'>...</td>
          </tr>
          <tr>
            <td class='one'>106</td>
            <td class='two'>NAME2</td>
            <td class='three'>...</td>
          </tr>
          <tr>
            <td class='one'>107</td>
            <td class='two'>NAME3</td>
            <td class='three'>...</td>
          </tr>
          <tr>
            <td class='one'>113</td>
            <td class='two'>NAME4</td>
            <td class='three'>...</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>

</html>

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thanks for spotting that! I have changed that but I am still getting the same errors.
@an_owl i have updated the answer. please have a look. if you find the answer helpful, please upvote it. it would help me too.
Thanks! That spelling mistake really killed me... (ノಠ益ಠ)ノ彡┻━┻
1

You didn't close the script tag. Also don't forget a datatable needs to have both thead and tbody if I'm not mistaken. Here you go. Please mark answer if you accept.

<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/datatables.min.css"/>
<body>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/datatables.min.js"></script>
<script>
$(document).ready(function(){
    $('#seats').DataTable( {
            "order": [[ 3, "desc" ]]
        });
});
        </script>
<div class="container">
<table class="table table-hover" id="seats">
        <thead>
            <tr>
                <th>Seat Number</th>
                <th>Full Name</th>
                <th>Status and Level</th>
            </tr>
        </thead>
                    <tbody>
                       <tr><td class='one'>1</td><td class='two'>NAME1</td><td class='three'>...</td></tr>
                       <tr><td class='one'>106</td><td class='two'>NAME2</td><td class='three'>...</td></tr>
                       <tr><td class='one'>107</td><td class='two'>NAME3</td><td class='three'>...</td></tr>
                       <tr><td class='one'>113</td><td class='two'>NAME4</td><td class='three'>...</td></tr>
</tbody></table></div>
</body></html>
Improve this answer

4 Comments

Sorry my copy/paste skills are weak. I have verified the script tag is closed in the file. I will update the post to reflect that. Thanks!
Just noticed you have a tbody but not a thead. I think you have to have both in a datatable!
I have the thead before the tbody. I call the thead after I call the table and I call the tbody after I end the thead.
I meant thread instead of thead but i see someone else wrote that down in an answer so all good now.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.