javascript - Datatable: Cannot read property 'length' of undefined -

the datatable cannot initialize. refer datatable website , try follow exactly, does't work out. need help!

here code:

<table id="example2" class="table table-bordered table-hover">                 <thead>                 <tr>                   <th>no</th>                   <th>order no</th>                   <th>date</th>                   <th>status</th>                   <th>sku #</th>                   <th>total qty</th>                   <th>create date</th>                 </tr>                 </thead>                 <tbody>                  <?php     $result = getlistorder($create_date, $end_date);     $i = 1;       while ($row = pg_fetch_array($result)) {             echo "<tr>" .                     "<td>" . $i . "</td>" .                     "<td>" . $row['order_id'] . "</td>" .                     "<td>" . $row['order_date'] . "</td>" .                     "<td>" . $row['status'] . "</td>" .                     "<td>" . $row['item'] . "</td>" .                     "<td>" . $row['total_qty'] . "</td>" .                     "<td>" . $row['create_date'] . "</td>" .                     "<tr>";             $i++;      }      ?>                     </tbody>                    </table> 

this script add @ footer.

<!-- jquery 3 --> <script src="bower_components/jquery/dist/jquery.min.js"></script> <!-- datatables --> <script src="bower_components/datatables.net/js/jquery.datatables.min.js"></script> <script src="bower_components/datatables.net-bs/js/datatables.bootstrap.min.js"></script> <script type="text/javascript">       $(document).ready(function () {          $('#example2').datatable();       })     </script> 

here screen shoot:

error screen shot: