当前位置: 首页 > 知识库问答 >
问题:

页面加载时的Ajax分页?

楚羽
2023-03-14

好的,首先,我将告诉这应该如何工作:我有一个页面的图片链接下侧,点击一个图片,该链接的信息出现在另一个div。我使用jQuery/Ajax将链接id发布到一个php文件中,并将该数据返回到所选的div。链接应该分页,以便一次显示4个。

这是正在发生的事情:post部分是ok的,当我单击一个链接时,正确的数据将显示在所选的div中。我不知道如何使链接div分页虽然。我需要他们分页时,页面加载,现在当页面加载所有链接显示,然后当我点击一个链接正确的数量(4)显示!

这是我的html,包含2个div:

<div class="dogsrehomeandrehomed">
<?php
include 'inc/connect.php';
$q = mysqli_query($link, "SELECT filename, id, name, age, sex  FROM gallery WHERE 
gallery = 1 ORDER BY id DESC") or die (mysql_error());
while($row = mysqli_fetch_array($q)){
$data = $row['filename'];
$file = substr($data, strpos($data, "/") + 1);
echo"<div class='homedogs'>",
"<a href={$row['id']} class='dogchoice'>",
"<img class='nailthumb-container3' src='$file' alt='{$row['name']}. Image' />",
"</a>",
"<br />",
'NAME: ',$row['name'],"<br />",'AGE: ',$row['age'],"<br />",'SEX: ',$row['sex'],
"</div>";
}
?>
</div>

<div class="dog">
<?php
include 'inc/connect.php';
$q = mysqli_query($link, "SELECT *  FROM gallery WHERE gallery = 1 ORDER BY id DESC 
LIMIT 1") or die (mysql_error());
while($row = mysqli_fetch_array($q)){
$data = $row['filename'];
$file = substr($data, strpos($data, "/") + 1);
echo"<div class='rehomediv'>",
"<img class='nailthumb-container2' src='$file' alt='{$row['name']}. Image' />","<br   
/>",
"<div class='nameagesex'>",
'NAME: ',$row['name'],"<br />",'AGE: ',$row['age'],"<br />",'SEX: ',$row['sex'],
"</div>",
"<div class='description'>",
nl2br($row['description']),
"</div>",
"</div>";
}
?>          
</div>
<script src="js/dog.js"></script>

这是我的dog.js文件:

$('a.dogchoice').click(function(e) {
e.preventDefault();
var linkClass = $(this).attr("class");
var linkText = new String(this);
var categoryValue = linkText.substring(linkText.lastIndexOf('/') + 1);
var params = {};
params[linkClass] = categoryValue;  
$.post('inc/dogchoice.php', params, function(data) {
    var totalRecords = $(data).length;
    var pageSize = 4;
    var numOfPages = Math.ceil(totalRecords / pageSize);
    var i,
      pageLinks = '<div class="pageLinks">';
    for (i = 0; i < numOfPages; i++) {
      pageLinks += '<a href="#" onclick="showDogLinks(' + i + ');return false;">' + (i 
      + 1) + '<\/a> ';
    }
    pageLinks += '<\/div>';
    $('.dog').html(pageLinks + data);
    showDogLinks(0);
});

});

//function to slice up records into pages
function showDogLinks( pageNo ) { 
var perPage = 4; 
var start = pageNo * perPage; 
var end = start + perPage; 
$('.homedogs').hide().filter(function(index) { 
    return ( (index > (start-1)) && ( index < end ) ); 
} ).show(); 
}

有人能帮忙吗?谢谢你来找我

共有1个答案

班承恩
2023-03-14

我整理好了。我刚刚用PHP对链接容器进行了分页。

谢谢你看..

 类似资料:
  • 问题内容: 我希望在发出ajax调用以更新数据库之前完全加载页面。我可以在body onload事件中调用javascript函数,以使页面完全加载,但是我不确定如何从那里触发Ajax调用。是否有更好的方法来实现此目的(页面加载后,Upadating数据库)? 问题答案: 使用JavaScript库确实很容易,例如使用jQuery,您可以编写: 如果没有jQuery,最简单的版本可能如下所示,但它

  • 问题内容: 我尝试在我的网站中实施AJAX。单击div changepass的内容时,则应加载changepass.template.php。这是我为此使用的代码。 我的问题是在页面changepass.template.php完全加载时如何显示GIF动画(loading.gif)。请给我一些代码提示。 问题答案: 有很多方法可以做到这一点。一种简单的方法: JS: 詹姆斯·怀斯曼 ( James

  • 问题内容: 我们正在发出多个ajax请求,以“保存” Web应用程序中的数据,然后重新加载页面。我们遇到了这样一种情况:(由于请求是异步发出的)在ajax调用完成时或之前重新加载页面。一种简单的解决方案是使用“ async”:false选项启用ajax调用,从而强制进行同步调用。这似乎可行,但是在执行任何调用之前运行的对话框代码会延迟运行。 任何意见是极大的赞赏! 还应注意,在重新加载之前放置al

  • 问题内容: 在我的index.html页面中,我想在加载应用程序时加载一个单独的Ajax页面,最好的方法是什么?这是我的索引代码: 在这里加载ajax子页面..... 子页面就是: 内容.............. 谢谢。 问题答案: 使用JavaScript可以做到这一点。您必须在页面加载时执行此操作。这是jQuery中的示例。

  • 问题内容: 我有一个PHP include,它需要一段时间才能加载,因为PHP必须获取很多数据。我不想放慢整个网页的加载,以等待包含此内容,那么如何使用ajax加载该包含内容呢?我不希望通过单击按钮来触发Ajax,而只是希望它在页面加载时加载包含,因此,如果您查看下面的示例,则会在显示内含代码的同时显示“更多HTML内容”。 php仍在加载中。 问题答案: 如果您使用的是jQuery,则可以使用他

  • 本文向大家介绍ajax实现页面的局部加载,包括了ajax实现页面的局部加载的使用技巧和注意事项,需要的朋友参考一下 ajax如何实现页面的局部加载,具体如下 点击头部即右上角的链接时,页面会根据相应的链接加载新的内容,显示在下方;在中间区域有3栏,当点击1栏中的链接,2栏中会显现相应的内容,点击2栏中的内容,3栏中的内容又会根据2栏的链接来加载显示内容。 页面效果如下: js代码如下: 整个dem