2013-11-14 38 views
1

我希望分页链接内容设置从开始(一旦加载页面)和数据内容(数据显示)使用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;">&lt;&lt; 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 &gt;&gt;</a></li> 
     </ul> 
     <?php 
    } 
    if($pages == 2) 
    { 
     ?> 
     <ul> 
      <li id="1" style="width: 100px;"><a href="javascript:void(0)" onclick="pagination(1); return false;">&lt;&lt; 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 &gt;&gt;</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;">&lt;&lt; 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 &gt;&gt;</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;">&lt;&lt; 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 &gt;&gt;</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;">&lt;&lt; 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 &gt;&gt;</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;">&lt;&lt; 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 &gt;&gt;</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;">&lt;&lt; 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 &gt;&gt;</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;">&lt;&lt; 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 &gt;&gt;</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"> 
              &nbsp; 
             </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_files中=”

<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> 


'; 

感谢你的帮助

+0

在控制台中是否有任何错误。当你使用'onclick'时,如果有javascript问题,肯定会有日志中的错误细节,请在你的问题中具体说明。 **所有链接停止工作**没有帮助。 – Saravanan

+0

这是显示的错误:Uncaught ReferenceError:分页未定义test.php:1 onclick – Ayoub

回答

0

已经修改了你的变量$required_filesfunction$(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> 

    '; 
+0

感谢您的帮助 – Ayoub