Question

您好我正在使用加载更多按钮来加载同一网页上下一页的内容。它可以在同一页面上显示无限制的结果。这是代码：

HTML：

<div class="wrapper">
    $results = $mysqli->prepare("SELECT id, name, message FROM paginate ORDER BY id DESC LIMIT ?, ?");
    $results->bind_param("dd", $position, $item_per_page);
    $results->execute(); //Execute prepared Query
    $results->bind_result($id, $name, $message);

    while($results->fetch()){ //fetch values
        echo '<li>'.$id.') <strong>'.$name.'</strong> : '.$message.'</li>';
    }
    <ul id="results"></ul>
    <div align="center">
    <button id="load_more_button"><img src="ajax-loader.gif"  class="animation_image" style="float:left;"> Load More</button> <!-- load button -->
    </div>
</div>

的Jquery var track_page = 1;

    $("#load_more_button").click(function (e) {
        track_page++;
        load_contents(track_page);
    });

    function load_contents(track_page){
        $('.animation_image').show();       
        $.post( 'fetch_pages.php', {'page': track_page}, function(data){
           if(data.trim().length == 0){
                $("#load_more_button").text("No more records!").prop("disabled", true);
            }

            $("#results").append(data);

            $('.animation_image').hide();
        });
    }
</script>

fetch_pages.php

<?php
include("config.inc.php");
$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
if(!is_numeric($page_number)){
    header('HTTP/1.1 500 Invalid page number!');
    exit();
}
$position = (($page_number-1) * $item_per_page);
$results = $mysqli->prepare("SELECT id, name, message FROM paginate ORDER BY id DESC LIMIT ?, ?");
$results->bind_param("dd", $position, $item_per_page);
$results->execute();
$results->bind_result($id, $name, $message);


while($results->fetch()){
    echo '<li>'.$id.') <strong>'.$name.'</strong> : '.$message.'</li>';
}

我想要做的是相应地更改“加载更多”按钮值？

如果没有结果，则在加载更多按钮时显示 NO RESULTS！。
如果结果少于6，则首先在加载更多按钮中显示 LOADING DATA ，直到数据加载，然后在加载更多按钮中显示 END OF RESULTS！。< / LI>
如果有超过5个结果，则先显示 LOADING DATA ，然后再显示 LOAD MORE 。

以下是我到目前为止所尝试的内容，因此它会让访问者更加困惑，因为它会显示 END OF RESULTS！，直到数据加载为止。

    <?php
        if((results)<5){
    ?>
            <div align="center" class="load-more-b">
                <button id="load_more_button">END OF RESULTS !</button>
            </div>
    <?php
        }else{
    ?>
            <div align="center" class="load-more-b">
                <button id="load_more_button"><img src="ajax-loader.gif"  class="animation_image" style="float:left;">&nbsp;&nbsp;LOAD MORE</button> 
            </div>
    <?php
        }
    ?>

我知道我需要在jquery代码中进行更改才能实现这一点，但我对jquery没有足够的了解。所以，任何帮助表示赞赏。感谢。

编辑：现在我正在显示没有AJAX调用的第一页，并显示第二页等等我正在使用AJAX调用。现在的问题是，如果结果超过5个，它会显示带有GIF图像的LOAD MORE按钮。但我只想要没有GIF的LOAD MORE按钮当用户点击该按钮时，GIF图像将被显示，直到下一个结果加载。谢谢... 它对我来说非常好。但我的问题是当我使用这个脚本时，加载数据需要2-3秒。在这2-3秒内，屏幕上会显示加载更多。

根据条件

0 个答案: