php - Data Show Vertical When Using Ajax Pagination -
i want show data pagging ajax
i create css , html can see code >> jsfiddle
but when apply data using ajax pagination
this data show vertical :( want data show this
data1 data2 data3 data4 data5 data6 this screenshoot
you can see web > http://tingali.com/pencarian.html
this qoute script
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 * sekolah tampil='ya' , jenis='sekolah' order bayar,urut asc"; $rows = $con->query($sql); $rows = $rows->num_rows; $sql = "select * sekolah tampil='ya' , jenis='sekolah' order bayar,urut asc limit $start,$limit"; $data = $con->query($sql); $str=''; $i=0; $data_web = mysqli_query($con,"select * 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) counter `sekolah_kunjungan` kode ='".$row['kode']."' , tgl_kunjungan between '".$row2->range_awal."' , '".$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 given, default 1. $prev = $page - 1; //previous page page - 1 $next = $page + 1; //next page 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 bother breaking { $first=''; ($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 hide { //close beginning; hide later pages $first=''; if($page < 1 + ($adjacents * 2)) { ($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 front , elseif($lastpage - ($adjacents * 2) > $page && $page > ($adjacents * 2)) { $first.= "<a class='page-numbers' href=\"?page=1\">first</a>"; ($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 end; hide pages else { $first.= "<a class='page-numbers' href=\"?page=1\">first</a>"; ($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>"; } ?> help me thank's
.container2 > div not work . because after .container2 have div#pagination
try this
css
.container2 .column-center { font-size: 16px; display: inline-block; width: 33.33%; } @media (max-width: 960px) { /*breakpoint*/ .container2 .column-center { width: 100%; } } instead of code
.container2 > div { font-size: 16px; display: inline-block; width: 33.33%; } @media (max-width: 960px) { /*breakpoint*/ .container2 > div { width: 100%; } }
Comments
Post a Comment