Ajax分页链接定制

Question

我使用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;">&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>


';

谢谢你的帮助

Answer 1

修改了$required_files变量后，在$(document).ready()中创建的function只能在该变量中调用。但你从外面打电话给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>

    ';