CODEWITHSUNDEEP
jqueryhtmldatatables
an_owl
an_owl

Reputation: 69

mData error when trying to use datatables

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>

Upvotes: 2

Views: 2500

Answers (2)

Fastersixth
Fastersixth

Reputation: 123

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>

Upvotes: 1

Neel Bhanushali
Neel Bhanushali

Reputation: 782

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>

Upvotes: 1

Related Questions