使用ajax和php从表中加载更多数据

时间:2017-12-30 06:51:14

标签: javascript php jquery ajax

我的数据库中有7个数据

我尝试使用ajaxphp从表中加载我的数据。

但是点击按钮后加载的数据显示更多,但load more按钮消失了。

这里是我的index.php代码https://github.com/jazuly1/piratefiles/blob/master/index.php

这里是我的ajax代码

<script>
$(document).ready(function(){
    $(document).on('click','.show_more',function(){
        var ID = $(this).attr('id');
        $('.show_more').hide();
        $('.loding').show();
        $.ajax({
            type:'POST',
            url:'getData.php',
            data:'idpost='+ID,
            success:function(html){
                $('#show_more_main'+ID).remove();
                $('.tutorial_list').append(html);
            }
        }); 
    });
});
</script>

和我的getdata.php代码https://github.com/jazuly1/piratefiles/blob/master/getdata.php

在我点击加载更多按钮

之前

enter image description here

点击加载更多按钮后。按钮消失了。

enter image description here

2 个答案:

答案 0 :(得分:0)

当&#34;显示更多&#34;单击,你$('.show_more').hide()这是有道理的。但是你再也没有表现出来?你也完全删除了一个类似的选择($('#show_more_main'+ID).remove()),但据我所知,这并没有任何效果。

remove()更改为:

$('.show_more').show();
$('.loding').hide();

答案 1 :(得分:0)

问题是您已使用Load more删除了jQuery部分,并期望getData API调用。但getData API调用会返回带有<tr>...</tr>内容的html以及Show more部分(如果需要)。最好使用JSON响应并在Java脚本中手动生成<tr>...</tr>,或者使用两个部分的JSON响应,可能采用以下格式:

{
    'content': '<tr><td>...</td></tr>....<tr><td>...</td></tr>',
    'showMore': '<div class="show_more_main" ...</div>'
}

比响应(不要忘记使用response = $.parseJSON(response))阅读content并附加$('.tutorial_list').append(response.content)作为数据部分,同样$("table.table").append(response.showMore)作为显示更多部分。< / p>

我相信你有了这个想法,你做错了。

但如果您仍想使用自己的代码而不是JSON,请使用以下技巧。

第1步:在getdata.php更新中显示更多部分,其中包含以下代码(保持Show more部分不可见):

<?php endforeach;
    if($data > $showLimit){ ?>
        <div class="show_more_main" style="visibility:hidden" id="show_more_main<?php echo $tutorial_id; ?>">
            <span id="<?php echo $tutorial_id; ?>" class="show_more" title="Load more posts" href="#" style="text-decoration: none;">Show more</span>
            <span class="loding" style="display: none;"><span class="loding_txt"><i class="fa fa-spinner fa-pulse fa-3x fa-fw" style="font-size:12px;"></i>Loading....</span></span>
        </div>
    <?php }   
    } 
}?>

第2步:使用Show more

中的Java Script将隐藏的部分index.php移至正确的位置
<script>
$(document).ready(function(){
    $(document).on('click','.show_more',function(){
        var ID = $(this).attr('id');
        $('.show_more').hide();
        $('.loding').show();
        $.ajax({
            type:'POST',
            url:'getData.php',
            data:'idpost='+ID,
            success:function(html){
                $('#show_more_main'+ID).remove();
                $('.tutorial_list').append(html);
                //Move to new right place if show more section exists. You may give data table an id if you want
                $(".show_more_main").appendTo("table.table");
                $(".show_more_main").show();
            }
        }); 
    });
});
</script>

我希望这会对你有所帮助。如果您不清楚任何部分,请随时写评论。