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

Question

I have 7 data in my database

I try to load my data from table using ajax and php .

but after I click the button load more the data is showing but load more button is gone.

here my index.php code https://github.com/jazuly1/piratefiles/blob/master/index.php

here my ajax code

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

and my getdata.php code https://github.com/jazuly1/piratefiles/blob/master/getdata.php

before I click load more button

after I click load more button. the button is gone.

Answer 1

When "Show More" is clicked, you $('.show_more').hide() which makes sense. But you never show it again? You also completely remove a similar selection ( $('#show_more_main'+ID).remove() ) but as far as I can tell, that doesn't have any effect.

Change the remove() to something like:

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

Answer 2

The problem is you have removed the Load more section with jQuery and expecting it from the getData API call. But the getData API call returns html with <tr>...</tr> 's content and in addition Show more section, if needed. It is better to either use JSON response and generate those <tr>...</tr> 's manually in Java Script, or a JSON response with two sections, may be in below format:

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

Than from the response (do not forget to use response = $.parseJSON(response) ) read the content and append as $('.tutorial_list').append(response.content) for data section and similarly $("table.table").append(response.showMore) for show more section.

I believe you got the idea, where you are doing wrong.

But if you still want to use your own code instead of JSON , just use the below trick.

Step 1: In getdata.php update show more section with below code (Keeping the Show more section invisible):

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

Step 2: Move the hidden section Show more to the right place using Java Script in 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>

I hope this helps you. Feel free to write comment, if any part is not clear to you.