如何动态计算每个页面分页显示多少项目答案

【问题标题】：How to dynamically calculate how many items to display on each page pagination如何动态计算每个页面分页显示多少项目
【发布时间】：2019-09-06 09:55:58
【问题描述】：

我正在仪表板上进行设计，它将显示订单和订单行项目。

我想要做的是没有滚动。相反，用户应该能够滑动页面以查看更多订单。

所以，我决定介绍 PAGINATION。

现在，我的问题是我无法设置每页的项目。某些订单的订单项比其他订单多。因此，如果我每页设置 8 个订单；所有订单的 in 项目可能不同，因此它将滚动放在底部。

Jquery 有什么方法可以根据订单的行项目计算它可以显示多少个订单/订单行项目。然后对于每一页，它显示每页不同数量的项目。因此，这将确保没有滚动 n 页。

这是我目前的代码。请注意：我使用该表作为示例。当我显示实际数据时，会有一个类似的表格，但行数不同。

<?php
$con = mysqli_connect("localhost","root","","test");

// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }


  $total = "SELECT * FROM users";
  $count=mysqli_query($con,$total);
  $nr=mysqli_num_rows($count);
//  echo $nr;

$items_per_page = 8;
$totalpages = ceil($nr/$items_per_page);

if (isset($_GET['page']) && !empty($_GET['page'])) {
   $page = $_GET['page'];
}else{
   $page=1;
}

$offset = ($page-1)*$items_per_page;
$sql = "SELECT * FROM users LIMIT $items_per_page OFFSET $offset ";
$result = mysqli_query($con,$sql);
$row_count=mysqli_num_rows($result);

While($row=mysqli_fetch_assoc($result))
{
   ?>

            <div class="col-md-3">
        <div class="panel panel-success">
              <div class="panel-heading">2 <span class="badge badge-secondary pull-right">DG3434JD</span></div>
              <div class="panel-body">
                <table class="table">
                  <thead>
                    <tr>
                      <th scope="col">#</th>
                      <th scope="col">First</th>
                      <th scope="col">Last</th>
                      <th scope="col">Handle</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th scope="row">1</th>
                      <td>Mark</td>
                      <td>Otto</td>
                      <td>@mdo</td>
                    </tr>
                    <tr>
                      <th scope="row">2</th>
                      <td>Jacob</td>
                      <td>Thornton</td>
                      <td>@fat</td>
                    </tr>
                    <tr>
                      <th scope="row">3</th>
                      <td>Larry</td>
                      <td>the Bird</td>
                      <td>@twitter</td>
                    </tr>                   <tr>
                      <th scope="row">3</th>
                      <td>Larry</td>
                      <td>the Bird</td>
                      <td>@twitter</td>
                    </tr>

                                        <tr>
                      <th scope="row">3</th>
                      <td>Larry</td>
                      <td>the Bird</td>
                      <td>@twitter</td>
                    </tr>
                                        <tr>
                      <th scope="row">3</th>
                      <td>Larry</td>
                      <td>the Bird</td>
                      <td>@twitter</td>
                    </tr>
                                        <tr>
                      <th scope="row">3</th>
                      <td>Larry</td>
                      <td>the Bird</td>
                      <td>@twitter</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
         </div>


   <?php
}

echo "<div class='pagination'>";
for ($i=1;$i<=$totalpages;$i++)
{
   if ($i==$page) {
      echo '<a class="active">'.$i .'</a>';
   }else{
      echo '<a href= "/slider.php?page='. $i .'">'.$i.'</a>';
   }
}
?>

 </div>

【问题讨论】：

标签： javascript php jquery mysql grid

【解决方案1】：

我猜你可以计算每个订单 + 订单行的高度，并将其与浏览器的高度（显示中的其他元素）进行比较。检查这个：JavaScript - Get Browser Height

对于订单 + 订单行高度，您可以进行预选以了解每个订单的订单行数，以便继续计算，但这对于 UI 而言非常昂贵。完成后，您可以计算每个订单行 + 订单的高度，并决定要从查询中获取多少元素

除此之外，当您使用 jQuery 时，您可以加载完整的订单 + 订单行并通过 Datatables 库进行分页：https://datatables.net/ 但是，如果您的数据库很大或将来会很大，这可能是一个痛点（您可以在渲染所有行时降低数据库性能以及浏览器）

希望对你有帮助

【讨论】：