Question

我为我的妹妹创建网上商店，但我在使用ajax分页，产品展示但数据产品混乱时遇到问题。在第1页或第3页或第4页和其他pagging ..

这是我在 pagging 1 中整洁的屏幕截图数据产品 enter image description here

这是我的屏幕截图数据产品混乱 pagging 3 enter image description here

这是我的代码“ product.php ”

<link rel="stylesheet" type="text/css" href="css/pagging.css" />
    <section id="content" class="col-md-9">
                    <div class="sort-by"> 
                        <form class="view" action="#">
                            <label for="view">View:</label>
                            <label class="grid-btn"><i class="fa fa-th-large"></i><input type="radio" name="view"></label><label class="list-btn"><i class="fa fa-th-list"></i><input type="radio" name="view"></label>
                        </form>
                        <div class="clear"></div>
                    </div>
                            <ul class="products products-grid">
                                <div id="pagination" cellspacing="0"></div>
                                    <script src="js/jquery.js"></script>
                                    <script type="text/javascript" >
                                    $(function(){
                                    $.ajax({
                                    url:"pagging_product.php",
                                    type:"POST",
                                    data:"actionfunction=showData&page=1",
                                    cache: false,
                                    success: function(response){
                                    $('#pagination').html(response);
                                    }
                                    });
                                    $('#pagination').on('click','.page-numbers',function(){
                                    $page = $(this).attr('href');
                                    $pageind = $page.indexOf('page=');
                                    $page = $page.substring(($pageind+5));
                                    $.ajax({
                                    url:"pagging_product.php",
                                    type:"POST",
                                    data:"actionfunction=showData&page="+$page,
                                    cache: false,
                                    success: function(response){
                                    $('#pagination').html(response);
                                    }
                                    });
                                    return false;
                                    });
                                    });
                                    </script>    
                          </ul>
    </section>

这是我的代码“ pagging_product.php ”

<?php
include('koneksi.php');
$limit = 6;
$adjacent = 3;

if(isset($_REQUEST['actionfunction'])  && $_REQUEST['actionfunction']!=''){
$actionfunction = $_REQUEST['actionfunction'];


   call_user_func($actionfunction,$_REQUEST,$con,$limit,$adjacent);
}
function showData($data,$con,$limit,$adjacent){
  $page  = $data['page'];

   if($page==1){
   $start = 0;  
  }
  else{
  $start = ($page-1)*$limit;
  }

      $sql   = "select * from product where show='OK'  order by last_update desc";
      $rows  = $con->query($sql);
      $rows  = $rows->num_rows;

      $sql = "select * from product where show='OK'  order by last_update desc limit $start,$limit";

  $data = $con->query($sql);
  $str='';
  $i=0; 
   while($row = mysqli_fetch_object($data)){
    $kt = $row->kode_pr;
    $ktsp =str_replace("&", "~", str_replace(" ", "-", $row->link));

    $data_kg = mysqli_query($con,"select * from kategori_product where kode_pr='".$kt."'");
    $kg=mysqli_fetch_object($data_kg);

            $str.="<li class='product-item'>
                                <div class='product-inner'>
                                    <a class='feature-img' href='".$ktsp."'><img src='".$row->sampul."' height='200px' width='300px' alt='".$row->product."'></a>
                                    <div class='product-title'>
                                        <h3><a href='".$ktsp."'>".$row->product."</a></h3>
                                        <p class='price'>Rp. ".$row->harga."</p>
                                    </div>

                                    <div class='product-info'>
                                        <div class='product-desc'>
                                            <h3><a href='".$ktsp."'>".$row->product."</a></h3>
                                            <p class='product-variable'>
                                            Kode Produk: <strong>".$row->kode_p."</strong><br>
                                            Kategori: <strong><a style='color:white;' href='kategori_product-".$kt.".html'>".$kg->nama_kategori."</a></strong><br>
                                            Stok: <strong>".$row->stock."</strong>
                                            </p>
                                        </div>
                                        <div class='add-to-cart'>
                                            <p class='price'>Rp. ".$row->harga."</p>
                                        </div>
                                    </div>

                                    <div class='product-list-info'>
                                    <h2><a href='".$ktsp."'>".$row->product."</a></h2>
                                        <p class='product-variable'>
                                            Kode Produk: <strong>".$row->kode_p."</strong><br>
                                            Kategori: <strong><a style='color:black;' href='kategori_product-".$kt.".html'>".$kg->nama_kategori."</a></strong><br>
                                            Stok: <strong>".$row->stock."</strong>
                                        </p>
                                        <div class='add-to-cart'>
                                            <a href='".$ktsp."'><button class='wr-btn wr-large-btn wr-icon-btn wr-red-btn'><i class='fa fa-shopping-cart'></i> Detail Produk</button></a>

                                        </div>
                                    </div>

                                </div>
                            </li>";

    $i++;
   }

echo $str; 
pagination($limit,$adjacent,$rows,$page);  
}
function pagination($limit,$adjacents,$rows,$page){ 
    $pagination='';
    if ($page == 0) $page = 1;                  //if no page var is given, default to 1.
    $prev = $page - 1;                          //previous page is page - 1
    $next = $page + 1;                          //next page is page + 1
    $prev_='';
    $first='';
    $lastpage = ceil($rows/$limit); 
    $next_='';
    $last='';
    if($lastpage > 1)
    {   

        //previous button
        if ($page > 1) 
            $prev_.= "<a class='page-numbers' href=\"?page=$prev\">previous</a>";
        else{
            //$pagination.= "<span class=\"disabled\">previous</span>"; 
            }

        //pages 
        if ($lastpage < 5 + ($adjacents * 2))   //not enough pages to bother breaking it up
        {   
        $first='';
            for ($counter = 1; $counter <= $lastpage; $counter++)
            {
                if ($counter == $page)
                    $pagination.= "<span class=\"current\">$counter</span>";
                else
                    $pagination.= "<a class='page-numbers' href=\"?page=$counter\">$counter</a>";                   
            }
            $last='';
        }
        elseif($lastpage > 3 + ($adjacents * 2))    //enough pages to hide some
        {
            //close to beginning; only hide later pages
            $first='';
            if($page < 1 + ($adjacents * 2))        
            {
                for ($counter = 1; $counter < 4 + ($adjacents * 2); $counter++)
                {
                    if ($counter == $page)
                        $pagination.= "<span class=\"current\">$counter</span>";
                    else
                        $pagination.= "<a class='page-numbers' href=\"?page=$counter\">$counter</a>";                   
                }
            $last.= "<a class='page-numbers' href=\"?page=$lastpage\">Last</a>";            
            }

            //in middle; hide some front and some back
            elseif($lastpage - ($adjacents * 2) > $page && $page > ($adjacents * 2))
            {
               $first.= "<a class='page-numbers' href=\"?page=1\">First</a>";   
            for ($counter = $page - $adjacents; $counter <= $page + $adjacents; $counter++)
                {
                    if ($counter == $page)
                        $pagination.= "<span class=\"current\">$counter</span>";
                    else
                        $pagination.= "<a class='page-numbers' href=\"?page=$counter\">$counter</a>";                   
                }
                $last.= "<a class='page-numbers' href=\"?page=$lastpage\">Last</a>";            
            }
            //close to end; only hide early pages
            else
            {
                $first.= "<a class='page-numbers' href=\"?page=1\">First</a>";  
                for ($counter = $lastpage - (2 + ($adjacents * 2)); $counter <= $lastpage; $counter++)
                {
                    if ($counter == $page)
                        $pagination.= "<span class=\"current\">$counter</span>";
                    else
                        $pagination.= "<a class='page-numbers' href=\"?page=$counter\">$counter</a>";                   
                }
                $last='';
            }

            }
        if ($page < $counter - 1) 
            $next_.= "<a class='page-numbers' href=\"?page=$next\">next</a>";
        else{
            //$pagination.= "<span class=\"disabled\">next</span>";
            }
        $pagination = "<div class=\"pagination\">".$first.$prev_.$pagination.$next_.$last;
        //next button

        $pagination.= "</div>\n";       
    }

    echo "<div style='height: 30px;' class=\"clear\"></div><center>".$pagination."</center>";  
}
?>

帮助我谢谢

Answer 1

这不是js问题。

在css中使用它

.products li {
  /* float: left; */
  width: 271px;
  list-style: none;
  box-sizing: border-box;
  margin: 47px 14px 0;
  display: inline-block;
}

使用ajax分页时数据混乱

1 个答案: