当表输出大于20行时，如何让它自动创建另一个页面？

Question

Basically this is supposed to display a whole table from my database. Because that table will have more than 1000 rows I want it to automatically create extra pages when the output is large . just like in your mail. Is this Possible?

<div class="row">
<div class="col-sm-10 col-xs-10 col-xs-offset-1 col-md-10 col-sm-offset-1 col-md-offset-1" id="Transactions">

<table class="table table-striped table-bordered" id="UsersTable">
    <thead>
        <th>no.</th>
        <th>Username</th>
        <th>Transaction</th>
        <th>Description</th>
        <th>time</th>

    </thead>
    <tbody>
        <? 
            $query="Select * From QueryLog";
            $result = mysqli_query($link,$query);
            $count = 0;
            while($row = mysqli_fetch_array($result)){
            $username=$row['Name'];
            $Trans=$row['Transaction'];
            $Description=$row['Description'];
            $time=$row['Time'];
        ?>
        <tr>
            <td>
                <?=$count?>
            </td>
            <td>
                <?=$username ?>
            </td>
            <td>
                <?=$Trans ?>
            </td>
            <td>
                <?=$Description ?>
            </td>
            <td>
               <?=$time ?>
            </td>
        </tr>
        <? $count++; } ?>

    </tbody>
</table>

Answer 1

It's way too much to type out here, but the general idea is you would retrieve all the results in an array. Split the array into chunks of 20. On the initial page load display the first 20 results. Then you would echo the entire json_encoded array into a div that you would give the CSS property display: none.

You would then need to add the next and previous buttons to the bottom of the table and add javascript listeners to handle back and next. To get the next page you need the current page. You can either compute it in javascript based on the rownumbers currently displayed or use a variable. Then you would need to JSON.parse the innerHTML of your table-data div. The current page will be at index where index = page-1. Then you'll replace the content of the table body with the contents of the array.

http://php.net/manual/en/function.array-chunk.php https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

The other option is to only display a page, then use an ajax call to get the next page of data instead of dumping it in the page in a hidden div.

<?php 
$query="Select * From QueryLog";
$result = mysqli_query($link,$query);
$table = $result->fetch_all(MYSQLI_ASSOC);

//split table into chunks of 20
$tablePages = array_chunk($table, 20);     
?>

<table class="table table-striped table-bordered" id="UsersTable">
  <thead>
    <th>no.</th>
    <th>Username</th>
    <th>Transaction</th>
    <th>Description</th>
    <th>time</th>
  </thead>
  <tbody>
<?php
  foreach($tablePages[0] as $rowNumber => $tableRow) {
?>
    <tr>
      <td><?php echo($rowNumber); ?></td>
      <td><?php echo($tableRow['Name']); ?></td>
      <td><?php echo($tableRow['Transaction']; ?></td>
      <td><?php echo($tableRow['Description']; ?></td>
      <td><?php echo($tableRow['Time']; ?></td>
    </tr>
<?php
  }
?>
<div id="table-data" class="Hidden"><?php 
  echo(json_encode($tablePages)); ?></div>