在HTML表格中显示特定的行数

Question

我在表格设置上方添加了一些JavaScript，我认为这可以让我选择行数，但似乎无法弄清楚为什么行不通。滚动功能有效，但这是表格的唯一响应部分。

<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>