php - 使用 Ajax 分页时数据垂直显示

Question

我想用分页ajax显示数据

我已经创建了 css 和 html 你可以看到这段> jsfiddle

但是当我使用 ajax 分页应用数据时

此数据显示垂直 :( 我想要这样的数据显示

data1        data2        data3
data4        data5       data6

这是截图

可以看到我的网站> http://tingali.com/pencarian.html

这是我的脚本

pencarian.php

<ul data-role="listview" data-icon="false" data-divider-theme="a">

                <div class="container2" >

                  <div  id="pagination"  cellspacing="0"></div>
                 <script type="text/javascript" >

$(function(){
        $.ajax({
        url:"pagging_page3_mobile.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_page3_mobile.php",
        type:"POST",
        data:"actionfunction=showData&page="+$page,
        cache: false,
        success: function(response){
        $('#pagination').html(response);
        }
        });
        return false;
        });
        });

</script>       

                </div>

        </ul> 

pagging_page3_mobile.php

<?php
include('connection.php');
$limit = 12;
$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 sekolah where tampil='YA' and jenis='Sekolah' order by bayar,urut asc";
      $rows  = $con->query($sql);
      $rows  = $rows->num_rows;

      $sql = "select * from sekolah where tampil='YA' and jenis='Sekolah' order by bayar,urut asc limit $start,$limit";


  $data = $con->query($sql);
  $str='';
  $i=0; 
  $data_web = mysqli_query($con,"SELECT * from web");
  $row2 = mysqli_fetch_object($data_web);

   while($row = $data->fetch_array(MYSQLI_ASSOC)){

            $jd = $row['link'];
            $data_sl = mysqli_query($con,"SELECT count(kode) as counter FROM `sekolah_kunjungan` where kode ='".$row['kode']."' and tgl_kunjungan between '".$row2->range_awal."' AND '".$row2->range_akhir."' ");
            $sl = mysqli_fetch_object($data_sl);
            $str.=" 
              <div class='column-center'>
               <center>
                <a href='".$jd."'><img  style='width:224px;height:228px;' src='images/sekolah/logo/".$row['logo']."'></a>
               </center>
                       <a href='".$jd."'><b>".$row['nama_sekolah']."</b><br/></a>
                        <font color='blue'>Dilihat : ".$sl->counter." </font><br/>
                        <i class='fa fa-home'></i>: ".$row['alamat']."
             </div>
            ";

    $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 "<br/><center>".$pagination."</center>";  
}
?>

帮帮我谢谢

Answer 1

.container2 > div 无效。因为在 .container2 之后你有 div#pagination

试试这个

CSS

.container2 .column-center {
    font-size: 16px;
    display: inline-block;
    width: 33.33%;
}
@media (max-width: 960px) { /*breakpoint*/
    .container2 .column-center {
        width: 100%;
    }
}

代替这段代码

.container2 > div {
    font-size: 16px;
    display: inline-block;
    width: 33.33%;
}
@media (max-width: 960px) { /*breakpoint*/
    .container2 > div {
        width: 100%;
    }
}