Question

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

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

因此，我决定介绍分页。

现在，我的问题是我无法每页设置项目。有些订单的订单项比其他订单多。因此，如果我每页设置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>

Answer 1

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

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

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

希望这会有所帮助

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

1 个答案: