Question

我使用jquery创建了一个分页系统，该脚本运行良好但是当我更改页面时，脚本让我回到原始页面因为刷新。

如何使用分页进行刷新？

谢谢

$(document).ready(function() {
    setInterval(function(){
    $("#results" ).load( "recherche.php"); 
    $("#results").on( "click", ".pagination a", function (e){
        e.preventDefault();
        $(".loading-div").show(); 
        var page = $(this).attr("data-page");
        $("#results").load("recherche.php",{"page":page}, function(){ 
            $(".loading-div").hide(); 

            });

        });

    }, 1000);
});

<div id="results">
<div class="loading-div">
<img src="img/loader.gif">
</div>
</div>

Answer 1

感谢评论中的其他详细信息。我相信您的问题是＆＃34; setInterval＆＃34; ...您可能只想在页面加载时一次运行此代码 - 然后ajax调用将接管。

在这种情况下，您需要使用setTimeout - setInterval将每1000毫秒重复一次回调。（在这种情况下）

$(document).ready(function() {
    setTimeout(function(){
        $("#results" ).load( "recherche.php"); 
        $("#results").on( "click", ".pagination a", function (e){
            e.preventDefault();
            $(".loading-div").show(); 
            var page = $(this).attr("data-page");
            $("#results").load("recherche.php",{"page":page}, function(){ 
                $(".loading-div").hide(); 

            });
        });
    }, 1000);
});

<div id="results">
    <div class="loading-div">
        <img src="img/loader.gif">
    </div>
</div>

基于评论的更新

好的，所以如果你想每秒刷新你的页面，（经常这样！）那么你需要记住你所在的当前页面，以便以后的调用加载正确的页面，总是。您应该使用变量来保存当前页面值，默认为＆＃34;第1页＆＃34;瞧！

$(document).ready(function() {
    var currentPage = 1;
    var loadPage = function(page) {
        $(".loading-div").show();

        page = page || currentPage; // if no page parameter provided, simply reload the currentPage

        $("#results").load("recherche.php",{"page":page}, function(){ 
            currentPage = page; // once the page is loaded, update our currentPage value since this is the page we are now looking at

            $(".loading-div").hide();
        });
    };

    // Move this out of the interval - you probably don't want to set-up a click handler every time your interval is called!
    $("#results").on( "click", ".pagination a", function (e){
        e.preventDefault();
        loadPage($(this).attr("data-page"));
    });

    setInterval(function(){
        loadPage(); // every 1 second, reload the current page
    }, 1000);

    loadPage(1); // initial loading of the first page
});

<div class="loading-div">
    <img src="img/loader.gif">
</div>
<div id="results">
</div>

最后要注意的一点是：第一次加载内容时，它会覆盖＆＃34;结果＆＃34; div的内容 - 包括你的loader.gif ...我已经将加载器移到了结果div之外，所以每次你请求一个新的页面都可以重复使用它...

希望这有帮助！

Jquery自动刷新与分页

1 个答案: