[英]load more data from table using ajax and php
我的数据库中有 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
在我点击加载更多按钮之前
在我点击加载更多按钮后。 按钮不见了。
当“显示更多”被点击时,你$('.show_more').hide()
这是有道理的。 但你再也没有展示过? 您还完全删除了一个类似的选择( $('#show_more_main'+ID).remove()
),但据我所知,这没有任何影响。
将remove()
更改为:
$('.show_more').show();
$('.loding').hide();
问题是您已经使用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>
我希望这可以帮助你。 如果任何部分对您来说不清楚,请随时写评论。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.