javascript - Ajax分页链接定制

标签 javascript php jquery ajax pagination

我正在使用一个用于ajax分页的Web模块，希望从一开始就设置分页链接内容(页面加载后)，并使用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>


';

感谢您的帮助

最佳答案

已修改您的 $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>

    ';

关于javascript - Ajax分页链接定制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19976025/

上一篇：Javascript 返回过去 6 个月，然后使用每个月作为变量

下一篇：javascript - 当我选择 30 天图表时，我的 Highchart 图表真的很慢

相关文章：

javascript - JSXGraph:如何标记多边形边界？

php - 使用 Xcode 6 应用程序加载配置文件数据

php - 检查 URL 中是否存在参数

php - mysqli_fetch_object 不返回某些表中字符串中的重音符号

javascript - Knockout.Js 在子项为空/移除时隐藏父项

javascript - jquery 函数 '.on("click")' starts uncalled

c# - JSON 数组而不是字符串

javascript - 推荐用于 JavaScript 编码的 Vim 插件？

javascript - 在 src 中附加 window.location

javascript - 如何仅在移动设备上停止轮播自动滑动？

©2024 IT工具网  联系我们