Display specific number of rows inside an HTML table

Question

I have included some javascript above the setup of my table that I thought would allow me to choose the number of rows but I can't seem to figure out why it doesn't work. The scroll function works but that is the only responsive part of the table.

<script type="text/javascript">
$(document).ready(function() {
    $('#example').DataTable( {
        responsive: true,
        "pageLength": 10
    } );
} );
</script>

<div style="height:700px; overflow-y: scroll;">
  <table id = "example">
    <tr>
      <th align="center"> ID</th>
      <th>Item Name</th>
      <th>Suggested Quantity</th>
      <th>Order Quantity</th>
    </tr>
    <?php
      while ($row = $result->fetch_assoc()) {
        echo "<tr>";
        echo "<td>" . $row['item_id'] ."</td>";
        echo "<td>" . $row['ITEM_NAME'] . "</td>";
        echo "<td>" . $row['suggested_qty'] . "</td>";
        echo "<td>" . $row['suggested_qty'] . "</td>";
        echo "</tr>";
      }
    ?>
  </table>
</div>