我的数据库中有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();
问题是你已经用Load more
删除了jQuery
部分并期望它来自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步:使用qazxsw poi中的qazxsw poi将隐藏的部分qazxsw poi移动到正确的位置
Show more
我希望这可以帮助你。如果有任何部分不清楚,请随意写评论。