从api.php获取数据后使用JQuery进行分页

时间:2016-09-10 10:25:20

标签: javascript php jquery json pagination

这是我的代码 -

client.php

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
    #show{
        background:red;
    }
</style>

</head>
<body>
<?php 
<div id="show"></div>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        setInterval(function () {
            $('#show').load('api.php')
        });
    });
</script>
</body>
</html>

api.php

<?php 
$conn = new mysqli('localhost', 'root', '', 'ajax01');
if ($conn->connect_error) {
    die("Connection error: " . $conn->connect_error);
}
$result = $conn->query("SELECT name FROM variables");
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        echo $row['name'] . '<br>';
    }
}
?>

这些代码给我的结果如 -

Result of above codes

我从数据库中获取值,它正在获取所有数据。因此,我需要对这些价值进行分页。需要帮助。

1 个答案:

答案 0 :(得分:2)

根据您的意见,

  

我想要一个仅显示一个值的分页,下一页将显示另一个...第二个结果将在点击下一个&gt;后显示

这里你需要考虑的事情很少,

根据以上几点和您的以下评论,解决方案将是这样的:

<强> client.php:

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
    #show{
        background:red;
    }
</style>

</head>
<body>
<div id="show">
    <?php

        $conn = new mysqli('localhost', 'root', '', 'ajax01');
        if ($conn->connect_error) {
            die("Connection error: " . $conn->connect_error);
        }

        // prepare query statement
        if($stmt = $conn->prepare("SELECT name FROM variables LIMIT 0, 1")){
            // execute statement
            $stmt->execute();

            // bind result variables
            $stmt->bind_result($name);

            // fetch values
            $stmt->fetch();

            // display name and pagination link
            if(isset($name) && !empty($name)){
                echo $name . '<br />';
                ?>
                <div id='link-div' style='background-color:#ffffff'>
                    <a href='' class='showmore' id='1'>Next&nbsp;&nbsp;&raquo;</a>
                </div>
                <?php
            }

            // close statement
            $stmt->close();
        }

    ?>
</div>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script type="text/javascript">
    $(document).ready(function() {
        $(document).on('click','.showmore',function(event){
            event.preventDefault();
            var offset = $(this).attr('id');

            $.ajax({
                type: 'POST',
                url: 'api.php',
                cache: 'false',
                data: {offset: offset},

                beforeSend: function(){
                    $('#link-div').html('<span>Loading...</span>');
                },

                success: function(data){
                    $('#link-div').remove();
                    $('#show').html(data);
                },

                error: function(jqXHR, textStatus, errorThrown){
                    // error
                }
            });
        });
    });
</script>
</body>
</html>

<强> api.php:

<?php
    if(isset($_POST['offset'])){
        $offset = $_POST['offset'];
        $prev = $offset - 1;  // Previous link in the pagination series
        $next = $offset + 1;  // Next link in the pagination series
        $conn = new mysqli('localhost', 'root', '', 'ajax01');
        if ($conn->connect_error) {
            die("Connection error: " . $conn->connect_error);
        }

        // prepare query statement
        if($stmt = $conn->prepare("SELECT COUNT(name) FROM variables")){
            // execute statement
            $stmt->execute();

            // bind result variables
            $stmt->bind_result($total_rows);

            // fetch values
            $stmt->fetch();

            // close statement
            $stmt->close();
        }

        // prepare query statement
        if($stmt = $conn->prepare("SELECT name FROM variables LIMIT ?, 1")){
            // bind parameter
            $stmt->bind_param('i', $offset);

            // execute statement
            $stmt->execute();

            // bind result variables
            $stmt->bind_result($name);

            // fetch values
            $stmt->fetch();

            // display name and pagination link
            if(isset($name) && !empty($name)){
                echo $name . '<br />';
                ?>
                <div id='link-div' style='background-color:#ffffff'>
                    <?php
                        if($offset > 0){
                            ?>
                            <a href='' class='showmore' id='<?php echo $prev; ?>'>&laquo;Prev&nbsp;&nbsp;</a>
                            <?php
                        }
                        if($offset < $total_rows - 1){
                            ?>
                            <a href='' class='showmore' id='<?php echo $next; ?>'>Next&nbsp;&nbsp;&raquo;</a>
                            <?php
                        }
                    ?>
                </div>
                <?php
            }

            // close statement
            $stmt->close();
        }
    }
?>