How to limit the number of rows to be displayed on a DataTable during the initial load of the page?

问题

I have a DataTable which is getting around 10,000 records from a MySQL table. But I don't want to display all the records on the initial load of the program. I only want to display the first 10 rows.

I tried using iDisplayLength: 10, which works. But it only works after all the 10,000 rows are loaded. Like all the 10,000 records get displayed, and only after that, the script gets executed and the 10 records are displayed.

<?php
include('connect.php');
?>
<head>
<?php
include('header.php');
?>

<script type="text/javascript">
$(document).ready(function(){
$('table').DataTable({
"iDisplayLength": 10
 }); 
 });
</script>

</head>

<?php
$sql = $db->query("select * from sos_register1 order by id");
 ?>
<body class="bg-info">
<div class="container-fluid">
<div class = "row justify-content-center">
<div class="col-10 bg-light rounded my-2 py-2">
        <h4 class="text-center text-dark pt-2">SOS-1</h4>
        <div class="table-responsive">
        <table class=" table table-bordered table-striped table-hover">
            <thead>
                <tr>
                     <th>Swatch</th>
                     <th></th>
                     <th></th>
                     <th></th>
                     <th>Stock</th>
                     <th></th>
                     <th></th>
                     <th></th>
                     <th>Production</th>
                </tr>
            </thead>

            <tbody>
                      <?php

while ($res = mysqli_fetch_assoc($sql)){
  ?>
<tr style="border-style: solid;">
  <td style="width: 350px;">
  <?php echo $res['rmatnr']; ?>/<?php echo $res['shade'] ?><br><img align="centre" src="images/Register/<?php echo $res['images'] ?>.jpg" alt="top" height="7%" width="100%"/></td>
  <td style="text-align: center;"><?php echo $res['rolls']; ?><br>-----------<br><?php echo $res['release_date']; ?></td>
  <td style="text-align: center;"><?php echo $res['rolls']; ?><br>-----------<br><?php echo $res['release_date']; ?></td>
  <td style="text-align: center;"><?php echo $res['rolls']; ?><br>-----------<br><?php echo $res['release_date']; ?></td>
  <td style="text-align: center;"><?php echo $res['rolls']; ?><br>-----------<br><?php echo $res['release_date']; ?></td>
  <td style="text-align: center;"><?php echo $res['rolls']; ?><br>-----------<br><?php echo $res['release_date']; ?></td>
  <td style="text-align: center;"><?php echo $res['rolls']; ?><br>-----------<br><?php echo $res['release_date']; ?></td>
 <td style="text-align: center;"><?php echo $res['rolls']; ?><br>-----------<br><?php echo $res['release_date']; ?></td>
 <td style="text-align: center;"><?php echo $res['meter']; ?><br>-----------<br><?php echo $res['release_date']; ?></td>
</tr>
<?php } ?>
            </tbody>
        </table>
        </div>
    </div>
</div>
</div>

The expected result is not to load all the 10,000 records from the table and display only 10 rows on the initial load.

来源：https://stackoverflow.com/questions/57901501/how-to-limit-the-number-of-rows-to-be-displayed-on-a-datatable-during-the-initia

标签

jquery

datatables