堆栈内存溢出
  繁体   English   中英

Ajax分页链接定制

[英]Ajax pagination links customization

 原文  2013-11-14 11:05:15  2   1    javascript/ php/ jquery/ ajax/ pagination

问题描述

我正在使用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 *变量来编辑希望显示分页中的页面，如下所示：

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


';

谢谢您的帮助

1 个解决方案

解决方案1
 0 已采纳  2013-11-14 12:16:24

修改了$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>

    ';

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 与ajax后退按钮的分页链接不返回 Laravel如何使Ajax分页链接像非Ajax一样工作 使用服务器端分页链接进行Ajax无限滚动 Laravel Ajax 分页链接刷新第二页点击 如何使用 ajax 处理分页中的页面链接？ JQuery Ajax 获取定制 jqGrid不显示分页链接 表分页，显示链接 链接的JavaScript分页 Rails 4.宝石will_paginate。 更改在ajax请求上设置的分页链接
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM