Question

您好我正在使用页面编号显示我只想使用的页面编码

下一个和上一个按钮如何实现此目的

这是我的代码

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

请帮我解决问题

任何帮助将不胜感激

Answer 1

如果你无法解决问题，我建议你不要真正需要javascript进行分页，它可以纯粹通过PHP实现（实际上这很简单），我已经使用此代码示例自行完成了我的一个网站。

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

如果你无法解决这个问题，请继续检查，

他还制作了一段视频，解释了您需要更改哪些部分，并了解代码的每个部分的作用/意味着：

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

Answer 2

我猜测删除回声不会起作用，因为那时你没有绑定active的数据元素。

尝试在你的CSS中创建一个.hidden类来隐藏每个回显的li元素，这样他们仍然可以active绑定它们，但是它们不会在DOM

.hidden { display: none; }

您的标记看起来像这样

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

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

2 个答案: