How to implement paging function

In the previous chapter, we completed the modification of the background content display html page. Here we need toquery the database data through SQL statements and display it in the table. The paging function is used here to display. After all, the number displayed on the first page is limited.

The so-called paging display means that the result set in the database is artificially divided into sections for display. Two initial parameters are required here:

Number of displays per page:$limitNews

Get the current number of pages: $page

Because the computer language starts obtaining records from 0 by default

If the number displayed per page is set to 3, $limitNews = 3,

Then the first page $page = 1 will display three records of 0, 1, 2

The second page $ page = 2 will display three records 3, 4, 5

The third page $page = 3 will display three records 6, 7, 8

and so on. . . . . . . . .

Set a parameter $limitFrom from which piece of data to start reading

You can get it from the above rules:

$limitFrom = ($page - 1) * $ limitNews;

will start to obtain data from the 0th, 3rd, and 6th items respectively.

Get the total number of news in the database table through query statements $countNews

<?php
$retQuery = mysqli_query($link, $sqlCount);  //查询数量sql语句
$retCount = mysqli_fetch_array($retQuery);   //获取数量
$count = $retCount[0]?$retCount[0]:0;   //判断获取的新闻数量
$countNews = $count;
?>

Here you need to give another parameter $countPage How many pages are displayed in total

Now Another question arises. If there are 10 news records and 3 records are displayed on each page, what about the remaining one?

We need to use % remainder to make the judgment:

<?php
$countPage = $countNews%$limitNews;   //求余数获取分页数量能否被除尽
if(($countPage) > 0) {  //获取的页数有余
  $countPage = ceil($countNews/$limitNews);  
  
// ceil() 函数向上舍入为最接近的整数,除不尽则取整数+1页, 10个新闻每个页面显示3个，成3个页面，剩余1个单独成1个页面，这样总共有4个页面
} else {
  $countPage = $countNews/$limitNews;  //如果是9个新闻每个页面显示3个，成3个页面
}
?>

Other parameters are $prev for the previous page and $next for the next page;

In the paging function There are often clicks on "Previous Page" and "Next Page" to jump

Let's talk about the idea of implementing the PHP code function first:

Previous page $prev is the current page $page -1 jumps to the previous page step by step. When the current page $page is the first page, jumping forward will be page 0. This will obviously cause bugs.

Here we will You need to give it a setting. When the current page $page is the first page, click "Previous Page" to set it to display as the first page and no longer jump forward.

<?php
  $prev = ($page - 1 <= 0 )?1:$page-1;
?>

The next page $next is the current page $page -1 and jumps to the next page step by step. The problem is that when $page is the last page, click "Next Page" to jump back. ,

Similar to the previous page, we set it to display the last page.

<?php
  $next = ($page + 1 > $countPage)?$countPage:$page+1;
?>

//When the current page number is greater than the total page number, the current page is displayed.

<!DOCTYPE html>
<html>
<head>  
<meta charset=utf8">  
<title>分表页</title>
</head>
<body>
   <div>
         <a href="?page=<?php echo $prev;?>">|上一页</a>         
         <?php for($i=1; $i<=$countPage; $i++):?>         
         <a href="?page=<?php echo $i;?>"><?php echo $i;?></a>         
         <?php endfor;?>         
         <a href="?page=<?php echo $next;?>">|下一页</a>
   </div>
</body>
</html>

Friends can add several pieces of test data to the database list table to test the paging function.

Use the while statement to loop out the data in the database and display it in the list.php file:

<?php while($rows=mysqli_fetch_array($result)):?>
<tr>
  <td style="text-align:left; padding-left:20px;">
  <input type="checkbox" name="id[]" value="<?php echo $rows["id"]?>" />
  <?php echo $rows["id"]?></td>
  <td><input type="text" name="sort[1]" value="1" style="width:50px; text-align:center; border:1px solid #ddd; padding:7px 0;" /></td>
  <td width="10%">
      <video width="200" height="150" controls="controls" >
          <source src="<?php echo $rows["video"]?>" type="video/mp4">
      </video>
  </td>
  <td><?php echo $rows["title"]?></td>
  <td><font color="#00CC99">首页</font></td>
  <td><?php echo $rows["cate_name"]?></td>
  <td><?php echo date("Y-m-d H:i:s",$rows["time"])?></td>
  <td>
      <div class="button-group">
          <a class="button border-main" href="#"><span class="icon-edit"></span>修 改</a>
          <a class="button border-red" href="#" onclick="return del(1,1,1)">
              <span class="icon-trash-o"></span>删 除
          </a>
      </div>
  </td>
</tr>
<?php endwhile;?>

Note: The date function is used here to convert the timestamp, which is displayed as a normal addition. time.

<?php echo date("Y-m-d H:i:s",$rows["time"])?>

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset=utf8"> <title>分表页</title> </head> <body> <div> <a href="?page=<?php echo $prev;?>">|上一页</a> <?php for($i=1; $i<=$countPage; $i++):?> <a href="?page=<?php echo $i;?>"><?php echo $i;?></a> <?php endfor;?> <a href="?page=<?php echo $next;?>">|下一页</a> </div> </body> </html>

submit Reset Code

Automatic operation

How to implement paging function

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]