duanna3634 2014-09-02 12:39
浏览 71
已采纳

如何在php中只使用分页中的下一个和上一个按钮

Hello i am having php code for pagination where page number displaying i want to use only

Next and Previous Button How can i achieve this

Here is my code

<?php
  session_start();
  $con = mysql_connect('localhost', 'root', 'root');
  mysql_select_db('Helixcrm', $con);

  $per_page = 15; 
  $select_table = "select * from tbl_site_configs";
  $variable = mysql_query($select_table);
  $count = mysql_num_rows($variable);
  $pages = ceil($count/$per_page)    
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Qjuery pagination with loading effect using PHP and MySql</title>

        //Scripts
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
            function Display_Load() {
                $("#load").fadeIn(1000, 0);
                $("#load").html("<img src='load.gif' />");
            }

            function Hide_Load() {
                $("#load").fadeOut('slow');
            };

            $("#paginate li:first").not('.page').css({
                'color': '#FF0084'
            }).css({
                'border': 'none'
            });
            Display_Load();
            $("#content").load("pagination.php?page=1", Hide_Load());

            <? php $page; ?>

            $("#paginate li").not('.page').click(function() {
                Display_Load();
                $("#paginate li").css({
                    'border': 'solid #193d81 1px'
                }).css({
                    'color': '#0063DC'
                }).removeClass("active");
                $(this).css({
                    'color': '#FF0084'
                }).css({
                    'border': 'none'
                }).addClass("active");
                var pageNum = this.id;
                $("#content").load("pagination.php?page=" + pageNum, Hide_Load());

            });

            $("#paginate li.page").click(function() {
                var page = $(this).attr("data-value");
                if (page == "prev") {
                    var index = $("#paginate li.active").index();
                    if (index > 1) {
                        $("#paginate li.active").prev().trigger("click");
                    } else {
                        $("#paginate li.active").trigger("click");
                    }
                } else {
                    var index = $("#paginate li.active").index();
                    if (index < $("#paginate li").length - 2) {
                        $("#paginate li.active").next().trigger("click");
                    } else {
                        $("#paginate li.active").trigger("click");
                    }
                }
            });
        });
        </script>

        <style type="text/css">
            #load { 
                width:30px;
                padding-top:50px;
                border:0px green dashed;
                margin:0 auto;
            }
            #paginate {
                text-align:center;
                border:0px green solid;
                width:500px;
                margin:0 auto;
            }
            .link {
                width:800px; 
                margin:0 auto; 
                border:0px green solid;
            }

            li{ 
                list-style: none; 
                float: left;
                margin-right: 16px; 
                padding:5px; 
                border:solid 1px #193d81;
                color:#0063DC; 
            }
            li:hover { 
                color:#FF0084; 
                cursor: pointer; 
            }
        </style>
</head>
<body>
    <div id="content" ></div>
    <div class="link" align="center">
        <ul id="paginate">
           <li id="" class="page" data-value="prev">Prev</li>
           <?php 
                for($i=1; $i<=$pages; $i++) {
                    echo '<li id="'.$i.'">'.$i.'</li>';
                }  
            ?>
            <li id="" class="page" data-value="next">Next</li>
         </ul>   
    </div>
    <div style="clear:both"> </div>
    <div id="load" align="center" ></div>
</body>
</html>

please help me to short out my problem

Any help will be appreciated

  • 写回答

2条回答 默认 最新

  • doutu2017 2014-09-02 12:51
    关注

    Im guessing removing the echo wont work because then you have no data elements which have active bound to them.

    Try making a .hidden class in your css to hide each of your echoed li elements, that way they can still have active bound to them, but they won't be visible on the DOM

    .hidden { display: none; }
    

    Your markup would then look something like this

    <li class='next'><li>
    
        <li id="1" class="hidden active">1</li>
        <li id="2" class="hidden">2</li>
        <li id="3" class="hidden">3</li>
    
    <li class='prev'><li>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥20 keepalive配置业务服务双机单活的方法。业务服务一定是要双机单活的方式
  • ¥50 关于多次提交POST数据后,无法获取到POST数据参数的问题
  • ¥15 win10,这种情况怎么办
  • ¥15 如何在配置使用Prettier的VSCode中通过Better Align插件来对齐等式?(相关搜索:格式化)
  • ¥100 在连接内网VPN时,如何同时保持互联网连接
  • ¥15 MATLAB中使用parfor,矩阵Removal的有效索引在parfor循环中受限制
  • ¥20 Win 10 LTSC 1809版本如何无损提升到20H1版本
  • ¥50 win10 LTSC 虚拟键盘不弹出
  • ¥30 微信小程序请求失败,网页能正常带锁访问
  • ¥15 Matlab求解微分方程,如何用fish2d进行预优?