How to use PHP and Vue to implement data paging function

How to use PHP and Vue to implement data paging function

In modern web development, data paging function is a common requirement. By dividing large amounts of data into several pages for display, page loading speed and user browsing experience can be improved. This article will introduce how to use PHP and Vue to implement data paging function, and provide specific code examples.

1. Back-end implementation of data paging

1. Create database tables and data

First, we need to create a table in the database to store data . Suppose we create a table called "products" with fields "id", "name", "price" and "quantity".

Then, insert some test data into the table.

2. Write PHP code to obtain data and paging logic

Next, we need to write PHP code to obtain data in the database and implement paging logic.

<?php
// 连接数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";

$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接是否成功
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 获取当前页码和每页数据量
$page = $_GET["page"];
$pageSize = $_GET["pageSize"];

// 计算起始索引
$startIndex = ($page - 1) * $pageSize;

// 查询数据
$sql = "SELECT * FROM products LIMIT $startIndex, $pageSize";
$result = $conn->query($sql);

// 将结果转换为数组
$data = [];
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}

// 查询总数据量
$sql = "SELECT COUNT(*) AS total FROM products";
$result = $conn->query($sql);
$total = $result->fetch_assoc()["total"];

// 关闭数据库连接
$conn->close();

// 返回结果
$response = [
    "data" => $data,
    "total" => $total
];
echo json_encode($response);
?>

The above code uses the mysqli extension to connect to the database and query the corresponding data based on the incoming page number and the amount of data per page. Finally, the query results are converted into an array and a JSON string containing the data and totals is returned.

2. Use Vue on the front end to implement data paging

1. Create Vue projects and components

First, you need to create a Vue project and create a name It is the paging component of Pagination.vue.

2. Write Vue code to obtain data and implement paging function

In the paging component, we need to obtain the data provided by the backend through Ajax requests and implement paging logic.

<template>
   <div>
      <table>
         <thead>
            <tr>
               <th>编号</th>
               <th>名称</th>
               <th>价格</th>
               <th>数量</th>
            </tr>
         </thead>
         <tbody>
            <tr v-for="item in data" :key="item.id">
               <td>{{item.id}}</td>
               <td>{{item.name}}</td>
               <td>{{item.price}}</td>
               <td>{{item.quantity}}</td>
            </tr>
         </tbody>
      </table>
      <div>
         <button @click="prevPage" :disabled="page <= 1">上一页</button>
         <button @click="nextPage" :disabled="page >= totalPages">下一页</button>
      </div>
   </div>
</template>

<script>
export default {
   data() {
      return {
         data: [],
         page: 1,
         pageSize: 10,
         totalPages: 0
      }
   },
   mounted() {
      this.getData();
   },
   methods: {
      getData() {
         axios.get('/api.php', {
            params: {
               page: this.page,
               pageSize: this.pageSize
            }
         })
         .then(response => {
            this.data = response.data.data;
            this.totalPages = Math.ceil(response.data.total / this.pageSize);
         })
         .catch(error => {
            console.log(error);
         });
      },
      prevPage() {
         if (this.page > 1) {
            this.page--;
            this.getData();
         }
      },
      nextPage() {
         if (this.page < this.totalPages) {
            this.page++;
            this.getData();
         }
      }
   }
}
</script>

<style scoped>
table {
   width: 100%;
}

th, td {
   padding: 8px;
   text-align: left;
}
</style>

The above code uses Vue's life cyclemountedThe hook function calls the getData method to obtain data immediately after the component is mounted. Then, based on the incoming page number and the amount of data per page, send an Ajax request to the backend in the getData method to obtain data. After obtaining the data, update the data attribute of the component to dynamically display the data. At the same time, calculate the total number of pages totalPages, and perform status judgment on the previous page and next page buttons to implement the paging function.

3. Conclusion

This article provides you with a specific implementation solution by using PHP and Vue to implement the data paging function. Obtain the data in the database through the back-end PHP code, and return the data paging to the front-end Vue component, realizing the basic function of data paging. You can make appropriate adjustments and extensions according to your needs.

I hope this article will be helpful to you when implementing the data paging function!

The above is the detailed content of How to use PHP and Vue to implement data paging function. For more information, please follow other related articles on the PHP Chinese website!