我想用paj ajax显示数据
我已经创建了css和html 你可以看到这段代码>> jsfiddle
但是当我使用ajax分页来应用数据时
此数据显示垂直:( 我想要这样的数据显示
data1 data2 data3
data4 data5 data6
这是截屏
你可以看到我的网页> http://tingali.com/pencarian.html
这是我的qoute脚本
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>";
}
?>
帮我谢谢
答案 0 :(得分: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%;
}
}