Ajax 分页链接自定义
Ajax pagination links customization
我正在使用一个 Web 模块进行 ajax 分页，希望分页链接内容从一开始就设置（一旦页面加载）
并且数据内容（要显示的数据）使用 ajax（每页页面）加载，一旦您单击页面链接，内容数据将被更改。问题是我想让分页链接更汗流浃背（<>）。我试图让它的内容加载方式与数据内容相同，但是，我发现自己面临一个JS问题：所有链接都停止工作。
这是分页页面代码：
<?php
require_once("_top.php");
require_once("config/config.php");
$config = new Config();
$cat=$_GET['cate'];
$subcat=$_GET['subcate'];
$donnees_total = $myadmin->ArticlePaginationTotalSubCategoriePage($subcat);
$total = $donnees_total['total'];
$messageParPage = 8;
$pages = ceil($total/$messageParPage);
if(isset($_GET['page'])){
$page1 = intval($_GET['page']);
if($page1>$pages){
$page1 = $pages;
}
}
else{
$page1 = 1;
}
if($pages == 1)
{
?>
<ul>
<li id="1" style="width: 100px;"><a href="javascript:void(0)" onclick="pagination(1); return false;"><< Précedent</a></li>
<li id="1"><a href="javascript:void(0)" onclick="pagination(1); return false;">1</a></li>
<li id="1" style="width: 100px;"><a href="javascript:void(0)" onclick="pagination(1); return false;">Suivant >></a></li>
</ul>
<?php
}
if($pages == 2)
{
?>
<ul>
<li id="1" style="width: 100px;"><a href="javascript:void(0)" onclick="pagination(1); return false;"><< Précedent</a></li>
<li id="1"><a href="javascript:void(0)" onclick="pagination(1); return false;">1</a></li>
<li id="2"><a href="javascript:void(0)" onclick="pagination(2); return false;">2</a></li>
<li id="2" style="width: 100px;"><a href="javascript:void(0)" onclick="pagination(2); return false;">Suivant >></a></li>
</ul>
<?php
}
if($pages == 3)
{
if($page1 == 1) { $nxt="2"; $prv="1";}
if($page1 == 2) { $nxt="3"; $prv="1";}
if($page1 == 3) { $nxt="3"; $prv="2";}
?>
<ul>
<li id="<?=$prv;?>" style="width: 100px;"><a href="javascript:void(0)" onclick="pagination(1); return false;"><< Précedent</a></li>
<li id="1"><a href="javascript:void(0)" onclick="pagination(1); return false;">1</a></li>
<li id="2"><a href="javascript:void(0)" onclick="pagination(2); return false;">2</a></li>
<li id="3"><a href="javascript:void(0)" onclick="pagination(3); return false;">3</a></li>
<li id="<?=$nxt;?>" style="width: 100px;"><a href="javascript:void(0)" onclick="pagination(<?=$nxt;?>); return false;">Suivant >></a></li>
</ul>
<?php
}
if($pages > 3)
{
if(($page1-2) <1)
{
if($page1 == 1) { $nxt="2"; $prv="1";}
if($page1 == 2) { $nxt="3"; $prv="1";}
if($page1 == 3) { $nxt="3"; $prv="2";}
?>
<ul>
<li id="<?=$prv;?>" style="width: 100px;"><a href="javascript:void(0)" onclick="pagination(<?=$prv;?>); return false;"><< Précedent</a></li>
<li id="1"><a href="javascript:void(0)" onclick="pagination(1); return false;">1</a></li>
<li id="2"><a href="javascript:void(0)" onclick="pagination(2); return false;">2</a></li>
<li id="3"><a href="javascript:void(0)" onclick="pagination(3); return false;">3</a></li>
<li> ....</li>
<li id="<?=$pages;?>"><a href="javascript:void(0)" onclick="pagination(<?=$pages;?>); return false;"><?=$pages;?></a></li>
<li id="<?=$nxt;?>" style="width: 100px;"><a href="javascript:void(0)" onclick="pagination(<?=$nxt;?>); return false;">Suivant >></a></li>
</ul>
<?php
}
if($page1 > ($pages-2))
{
if($page1 == $pages)
{
?>
<ul>
<li id="<?=$page1-1;?>" style="width: 100px;"><a href="javascript:void(0)" onclick="pagination(<?=$page1-1;?>); return false;"><< Précedent</a></li>
<li id="1"><a href="javascript:void(0)" onclick="pagination(1); return false;">1</a></li>
<li> ....</li>
<li id="<?=$pages-2;?>"><a href="javascript:void(0)" onclick="pagination(<?=$pages-2;?>); return false;"><?=$pages-2;?></a></li>
<li id="<?=$pages-1;?>"><a href="javascript:void(0)" onclick="pagination(<?=$pages-1;?>); return false;"><?=$pages-1;?></a></li>
<li id="<?=$pages;?>"><a href="javascript:void(0)" onclick="pagination(<?=$pages;?>); return false;"><?=$pages;?></a></li>
<li id="<?=$pages;?>" style="width: 100px;"><a href="javascript:void(0)" onclick="pagination(<?=$pages;?>); return false;">Suivant >></a></li>
</ul>
<?php
}
if($page1 == ($pages-1))
{
?>
<ul>
<li id="<?=$page1-1;?>" style="width: 100px;"><a href="javascript:void(0)" onclick="pagination(<?=$page1-1;?>); return false;"><< Précedent</a></li>
<li id="1"><a href="javascript:void(0)" onclick="pagination(1); return false;">1</a></li>
<li> ....</li>
<li id="<?=$pages-2;?>"><a href="javascript:void(0)" onclick="pagination(<?=$page1-2;?>); return false;"><?=$pages-2;?></a></li>
<li id="<?=$pages-1;?>"><a href="javascript:void(0)" onclick="pagination(<?=$page1-1;?>); return false;"><?=$pages-1;?></a></li>
<li id="<?=$pages;?>"><a href="javascript:void(0)" onclick="pagination(<?=$pages;?>); return false;"><?=$pages;?></a></li>
<li id="<?=$pages;?>" style="width: 100px;"><a href="javascript:void(0)" onclick="pagination(<?=$pages;?>); return false;">Suivant >></a></li>
</ul>
<?php
}
if($page1== ($pages-2))
{
?>
<ul>
<li id="<?=$page1-1;?>" style="width: 100px;"><a href="javascript:void(0)" onclick="pagination(<?=$page1-1;?>); return false;"><< Précedent</a></li>
<li id="1"><a href="javascript:void(0)" onclick="pagination(1); return false;">1</a></li>
<li> ....</li>
<li id="<?=$pages-2;?>"><a href="javascript:void(0)" onclick="pagination(<?=$page1-2;?>); return false;"><?=$pages-2;?></a></li>
<li id="<?=$pages-1;?>"><a href="javascript:void(0)" onclick="pagination(<?=$page1-1;?>); return false;"><?=$pages-1;?></a></li>
<li id="<?=$pages;?>"><a href="javascript:void(0)" onclick="pagination(<?=$pages;?>); return false;"><?=$pages;?></a></li>
<li id="<?=$page1+1;?>" style="width: 100px;"><a href="javascript:void(0)" onclick="pagination(<?=$page1+1;?>); return false;">Suivant >></a></li>
</ul>
<?php
}
}
if((($page1-2) >1)&&(($page1+2) <$pages))
{
?>
<ul>
<li id="<?=$page1-1;?>" style="width: 100px;"><a href="javascript:void(0)" onclick="pagination(<?=$page1-1;?>); return false;"><< Précedent</a></li>
<li id="1"><a href="javascript:void(0)" onclick="pagination(1); return false;">1</a></li>
<li> ....</li>
<li id="<?=$page1-1;?>"><a href="javascript:void(0)" onclick="pagination(<?=$page1-1;?>); return false;"><?=$page1-1;?></a></li>
<li id="<?=$page1;?>"><a href="javascript:void(0)" onclick="pagination(<?=$page1;?>); return false;"><?=$page1;?></a></li>
<li id="<?=$page1+1;?>"><a href="javascript:void(0)" onclick="pagination(<?=$page1+1;?>); return false;"><?=$page1+1;?></a></li>
<li> ....</li>
<li id="<?=$pages;?>"><a href="javascript:void(0)" onclick="pagination(<?=$pages;?>); return false;"><?=$pages;?></a></li>
<li id="<?=$page1+1;?>" style="width: 100px;"><a href="javascript:void(0)" onclick="pagination(<?=$page1+1;?>); return false;">Suivant >></a></li>
</ul>
<?php
}
}
?>
来自愿望显示分页的页面：
<?php
$required_files='
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="membre/ajax/css.css" />
<script type="text/javascript" src="membre/ajax/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function showLoader(){
$(''.search-background'').fadeIn(200);
}
function hideLoader(){
$(''.search-background'').fadeOut(200);
};
function pagination(page){
showLoader();
$("#daycontent").load("membre/ajax/listes-articles.php?page="+page+"&cate=sport&subcate='.$_GET['subcat'].'", hideLoader);
$("#paging_button").load("membre/ajax/pagination.php?page="+page+"&cate=sport&subcate='.$_GET['subcat'].'", hideLoader);
return false;
};
showLoader();
$("#daycontent").load("membre/ajax/listes-articles.php?page=1&cate=sport&subcate='.$_GET['subcat'].'", hideLoader);
$("#paging_button").load("membre/ajax/pagination.php?page=1&cate=sport&subcate='.$_GET['subcat'].'", hideLoader);
});
</script>
';
$subcate=$_GET['subcat'];
$cat='sport';
$souscateg= $myadmin->SousCategorieViewOne($subcate);
$donnees_total = $myadmin->ArticlePaginationTotalSubCategoriePage($subcate);
$categ= $myadmin->CategorieViewOne($cat);
$total = $donnees_total['total'];
$messageParPage = 8;
$pages = ceil($total/$messageParPage);
?>
<section id="content">
<div class="container_24">
<article class="grid_18_hi_tech">
<div class="border-bot">
<h5><?=$categ['nom'];?> : <span><?=$souscateg['nom'];?></span></h5>
<div class="page-article" style="margin-bottom: 35px;">
<article class="grid_15_hi_tech alpha">
<article class="grid_18_hi_tech">
<div class="border-bot">
<div >
<div id="container-1">
<div id="daycontent">
</div>
<div id="paging_button" style="text-align:center;">
</div>
</div>
</div>
<div style="height:34px;"></div>
</div>
</article>
</article>
</div>
</div>
</article>
<div class="clear"></div>
</div>
</section>
谢谢大家我刚刚找到了解决方案，通过编辑 *required_files* var 从愿望显示分页编辑页面，如下所示：
$required_文件='
<link rel="stylesheet" type="text/css" media="screen" href="membre/ajax/css.css" />
<script type="text/javascript" src="membre/ajax/jquery-1.3.2.js"></script>
<script type="text/javascript">
function pagination(page){
$(''.search-background'').fadeIn(200);
$("#daycontent").load("membre/ajax/listes-articles1.php?page="+page+"&cate=sport&subcate='.$_GET['subcat'].'");
$(''.search-background'').fadeOut(200);
return false;
};
$(document).ready(function(){
function showLoader(){
$(''.search-background'').fadeIn(200);
}
function hideLoader(){
$(''.search-background'').fadeOut(200);
};
showLoader();
$("#daycontent").load("membre/ajax/listes-articles1.php?page=5&cate=sport&subcate='.$_GET['subcat'].'", hideLoader);
});
</script>
';
谢谢你的帮助
修改了$required_files变量，function $(document).ready()内创建的变量只能在该变量中调用。但是你从外面打电话给pagination()。因此，只需全局定义它。
$required_files='
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="membre/ajax/css.css" />
<script type="text/javascript" src="membre/ajax/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
showLoader();
$("#daycontent").load("membre/ajax/listes-articles.php?page=1&cate=sport&subcate='.$_GET['subcat'].'", hideLoader);
$("#paging_button").load("membre/ajax/pagination.php?page=1&cate=sport&subcate='.$_GET['subcat'].'", hideLoader);
});
function showLoader(){
$(''.search-background'').fadeIn(200);
}
function hideLoader(){
$(''.search-background'').fadeOut(200);
};
function pagination(page){
showLoader();
$("#daycontent").load("membre/ajax/listes-articles.php?page="+page+"&cate=sport&subcate='.$_GET['subcat'].'", hideLoader);
$("#paging_button").load("membre/ajax/pagination.php?page="+page+"&cate=sport&subcate='.$_GET['subcat'].'", hideLoader);
return false;
};
</script>
';
相关文章：
- LinkedIn共享链接图片未使用自定义url更新
- 通过Rails中的自定义Jquery对话框处理链接的确认
- 如何在Sails.js v0.11中触发自定义套接字事件
- 点击tpl链接时，ExtJS 4.2自定义组件触发事件
- jQuery使用自定义select(）自动完成:自定义HTML中的超链接
- 自定义链接的打开方式
- Basic jQuery Slider中上一张/下一张幻灯片的自定义链接触发器
- 如何在不重新加载页面的情况下在醉酒的工具提示中创建自关闭链接
- CoffeeScript 承诺与函数定义链接
- 将自定义链接添加到饼图中的系列/数据部分(高图表.js）
- 谷歌分析自定义链接归因
- 从Angular.js中的自定义链接获取URL参数
- 自定义链接在facebook分享帖子
- 如何分配一个自定义链接到CMS页面在Magento
- Angular中的自定义链过滤器
- 使用javascript替换基于查询字符串的自定义链接id
- 使用jquery定义如何在基于网格的数据表插件中添加自定义链接按钮
- JavaScript -当我更改链接的href时未定义链接
- 自定义链接导航的谷歌搜索快捷方式
- 使用css自定义链接
