Ajax分页链接自定义

i'm using a web module for ajax pagination in wish the pagination links content is set from the begin (once the page is loaded) and the data content (data to display) is loaded using ajax (page per page), once you click the page link the content data will be changed. the problem is that i want to make the pagination links more sweaty ( <>). i've tried to make it content loaded the same way as the data content but, i find my self in front of a js problem : all links stop working.

here is the pagination page code :

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

        }
    }
?>

the page from wish display pagination :

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

thank you all i have just find my way the solution by editing the page from wish display pagination by editing the *required_files* var like this :

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


';

thank you for your help

Have modified your $required_files variable, function created inside $(document).ready() can be called only inside that. But you calling pagination() from outside. So just define it globally.

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

    ';