How to dynamically calculate how many items to display on each page pagination

Question

I am designing on the dashboard which will show orders and orders line items.

What I want to do is NOT HAVE SCROLL. Instead, the user should be able to slide pages to view more orders.

So, I have decided to introduce PAGINATION.

NOW, MY PROBLEM IS I CANNOT SET ITEMS PER PAGE. some orders have more line items than others. So If I set 8 orders per page; the in items of all orders may be different so it will put scroll at the bottom.

Is there any way Jquery can calculate how many orders/orders line items it can display based on the line items of the order. Then for each page, it shows the different number of items per page. So, this will ensure there is no scroll n page.

This is my code at the moment. PLEASE NOTE: I am using the table for example purpose. There will be a similar table but the different number of lines when I will show actual data.

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

score 0 · Answer 1 · answered Apr 16 '19 at 10:24

I guess you can calculate the height of each order + order line and compare it to the browser's height - the other elements you have in the display. Check this: JavaScript - Get Browser Height

For the order + order line height, you could do a pre-select to know the count of order line per each order in order to continue the calculation but this is quite expensive for just UI purposes. Once you've done that, you can calculate the height of each order line + order and decide how many elements you want to fetch from the query

Apart from this, as you're using jQuery you can load the full order + order lines and do a pagination through Datatables library: https://datatables.net/ However, this can be a pain point if your database is big or will be big in the future (you can slow down the database performance as well as the browser when rendering all rows)

Hope it helps a bit

How to dynamically calculate how many items to display on each page pagination

1 Answers1