时间戳

首页 > 解决方案 > 如何在页面初始加载期间限制要在 DataTable 上显示的行数？

jquery - 如何在页面初始加载期间限制要在 DataTable 上显示的行数？

问题描述

我有一个 DataTable，它从 MySQL 表中获取大约 10,000 条记录。但我不想在程序初始加载时显示所有记录。我只想显示前 10 行。

我尝试使用iDisplayLength: 10，它有效。但它仅在加载所有 10,000 行后才有效。就像显示所有 10,000 条记录一样，只有在那之后，才会执行脚本并显示 10 条记录。

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

预期的结果是不会从表中加载所有 10,000 条记录，并且在初始加载时仅显示 10 行。

标签： jquerydatatables

解决方案

推荐阅读