php - 分页

最新推荐文章于 2023-10-05 21:52:18 发布

puth7788

最新推荐文章于 2023-10-05 21:52:18 发布

阅读量828

点赞数 1

分类专栏： PHP 文章标签： php

本文链接：https://blog.youkuaiyun.com/flower46273736/article/details/77313672

版权

PHP 专栏收录该内容

3 篇文章

订阅专栏

select * from tableName limit num1,num2
前端 : vue
后台：php
UI : element-ui

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="https://unpkg.com/element-ui@1.4.2/lib/index.js"></script>
    <link href='css/index.css' rel='stylesheet' type='text/css'>
    <link href='https://unpkg.com/element-ui@1.4.2/lib/theme-default/index.css' rel='stylesheet' type='text/css'>
</head>

<body>
    <div class="container" id="todo">
        <ul class="list-item">
            <li v-for="task in tasks">
                {{ task.id }}
            </li>
        </ul>


        <div class="block">
            <el-pagination  @current-change="handleCurrentChange" :current-page.sync="currentPage1" :page-size="5"
                layout="total, prev, pager, next" :total="pagetotal">
            </el-pagination>
        </div>
    </div>



    <script tyle="text/javascript">
        new Vue({
            el: "#todo",
            data: {
                newTask: "",
                tasks: [],
                editingTask: {},
                currentPage1: 1,
                pagetotal: 20,
                page: 1,
                pageSize:5,
            },


            created() {
                var _this = this;
                //获取数据
                axios.get('page.php', {
                        params: {
                            page: this.page,
                            pageSize: this.pageSize,
                        }
                    })

                    .then(function (res) {
                        _this.tasks = res.data.Data;
                        _this.pagetotal = res.data.PageTotal;

                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },

            methods: {           
                handleCurrentChange(val) {
                    this.page = val
                    var _this = this;
                    //获取数据
                    axios.get('page.php', {
                        params: {
                                pageNum: val,
                                pageCount: this.pageSize,
                            }
                        })

                        .then(function (res) {
                            _this.tasks = res.data.Data;
                            console.log(res)
                        })
                        .catch(function (error) {
                            console.log(error);
                        });

                },
            }

        });
    </script>
</body>

</html>

//page.php
<?php  
    include "conn.php"; 
    //查询数据
    $pageNow =  $_GET['pageNum'];
    $pageSize =  $_GET['pageCount'];


    $sql = "select * from PageTable limit " . ($pageNow - 1)*$pageSize . ",$pageSize";
    mysqli_select_db( $conn, 'PageTable' );
    $res = mysqli_query( $conn, $sql );

    //查询总页数
    $pageSql = "SELECT * FROM PageTable";  
    $pageres = mysqli_query( $conn, $pageSql );
    $page_count = mysqli_num_rows($pageres);

    //遍历数据
    $result = array();  
    $arr = array();  

    while($row = mysqli_fetch_array($res)) {  
        $count=count($row);//不能在循环语句中，由于每次删除 row数组长度都减小  

        for($i=0;$i<$count;$i++){  
            unset($row[$i]);//删除冗余数据  
        }  

        array_push($result,$row);  

    }  

    $arr['code'] = '200';
    $arr['message'] = 'Success';
    $arr['Data'] = $result;
    $arr['PageTotal'] = $page_count;


    echo json_encode($arr, JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT);  
    mysqli_close($conn);
?>

//conn.php
<?php
$conn = mysqli_connect("localhost","root",'','pagination');
mysqli_query($conn,"set names utf8");
?>