duanna3634
duanna3634
2014-09-02 12:39

如何在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 doutu2017 7年前

    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>
    
    点赞 评论 复制链接分享
  • dpir3950 dpir3950 7年前

    If you can't solve your issue, I'd recommend that you don't really need javascript for pagination, it can be achieved purely through PHP (Which is actually really simple to do), I've done it myself for one of my websites using this code example..

    http://www.developphp.com/page.php?id=289

    Go ahead and check it out if you can't solve this problem out,

    Also he produced a video explaining which sections you need to change, and going through what each part of the code does/means:

    https://www.youtube.com/watch?v=K8xYGnEOXYc

    点赞 评论 复制链接分享