使用 ajax 和 php 從表中加載更多數據

Question

我的數據庫中有 7 個數據

我嘗試使用ajax和php從表中加載我的數據。

但是在我單擊按鈕加載更多數據后顯示但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

在我點擊加載更多按鈕之前

在我點擊加載更多按鈕后。 按鈕不見了。

Answer 1

當“顯示更多”被點擊時，你$('.show_more').hide()這是有道理的。 但你再也沒有展示過？ 您還完全刪除了一個類似的選擇（ $('#show_more_main'+ID).remove() ），但據我所知，這沒有任何影響。

將remove()更改為：

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

Answer 2

問題是您已經使用jQuery刪除了Load more部分，並期望從getData API 調用中獲得它。 但是getData API 調用會返回帶有<tr>...</tr>內容的 html，如果需要，還會返回Show more部分。 最好使用JSON響應並在 Java Script 中手動生成那些<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)顯示更多部分。

我相信你明白了，你哪里做錯了。

但是如果您仍然想使用自己的代碼而不是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 步：使用index.php Java Script將隱藏部分Show more移動到正確的位置

<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>

我希望這可以幫助你。 如果任何部分對您來說不清楚，請隨時寫評論。