使用ajax php在表中加载更多内容 [英] Load more content in table using ajax php

问题描述

在下面的代码中，我在表格中显示三个帖子，意味着单行中有三个帖子，底部加载更多按钮现在问题是当我点击显示更多时，下一行应该有下三个帖子，但是第一个帖子下一行是第一行的第二个帖子，当我点击显示更多相同的事情发生在行的其余部分，每次新行的第一个帖子是前一行的第二个帖子。看起来javascript正在捕获第一个帖子的id而不是连续的最后一个，所以如何使它正确？

In below code, I display three posts in table, means three posts in single row with load more button at their bottom now problem here is when I click show more the next row should have next three posts, but the first post of next row is second post of first row, and when ever I click show more same happens with rest of row, every time the first post of new row is second post of previous row. Looks like javascript is catching id of first post instead of last in a row so how to make it right?

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

<?php
$sql = "SELECT * FROM posts ORDER BY id desc limit 3";
$query = $db->prepare($sql);
$query->execute();
$row = $query->fetch(PDO::FETCH_ASSOC);
$ID = $row['blogs_id'];
?>

<div class="posts">
<table>
<tr>
<?php do { //horizontal looper?>
<td>
<div><h2><?php echo $row['title']; ?></h2></div>          
<div><p><?php echo $row['body']; ?></p></div>
<img src='<?php echo $row['pic']; ?>'>
<div><p><?php echo $row['about']; ?></p></div>
</td>
<?php
$row = $query->fetch(PDO::FETCH_ASSOC);
if (!isset($nested_List)) {
$nested_List= 1;
}
if (isset($row) && is_array($row) && $nested_List++%3==0) {
echo "</tr><tr>";
}
} while ($row); //end horizontal looper 
?>
</table>
<div class="show_more_main" id="show_more_main<?php echo $ID; ?>">
<span id="<?php echo $ID; ?>" class="show_more" title="Load more posts">Show more</span>
<span class="loding" style="display: none;"><span class="loding_txt">Loading...</span></span>
</div>
</div>

ajax_more.php

ajax_more.php

if(isset($_POST["id"]) && !empty($_POST["id"])){ 
$id=$_POST['id']; 
$query = $db->prepare("SELECT * FROM posts WHERE id < :getid ORDER BY id desc LIMIT 3");
$query->execute(array(':getid'=>$id));
$row = $query->fetch(PDO::FETCH_ASSOC);
$ID = $row['blogs_id'];
?>

<table>
<tr>
<?php do { //horizontal looper?>
<td>
<div><h2><?php echo $row['title']; ?></h2></div>          
<div><p><?php echo $row['body']; ?></p></div>
<img src='<?php echo $row['pic']; ?>'>
<div><p><?php echo $row['about']; ?></p></div>
</td>
<?php
$row = $query->fetch(PDO::FETCH_ASSOC);
if (!isset($nested_List)) {
$nested_List= 1;
}
if (isset($row) && is_array($row) && $nested_List++%3==0) {
echo "</tr><tr>";
}
} while ($row); //end horizontal looper 
?>
</table>
<div class="show_more_main" id="show_more_main<?php echo $ID; ?>">
<span id="<?php echo $ID; ?>" class="show_more" title="Load more posts">Show more</span>
<span class="loding" style="display: none;"><span class="loding_txt">Loading…</span></span>
</div>
<?php 
} 
?>

推荐答案

（ document ）。ready（ function （）{

(document).ready(function(){

（ document ）。on（' click'，' 。show_more'， function （）{
var ID =

(document).on('click','.show_more',function(){ var ID =

（ this ）。attr（' id'）;

(this).attr('id');

这篇关于使用ajax php在表中加载更多内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！