[英]Dynamically form columns in bootsrap using php
i want to dynamically display content in 3 bootstrap colums. 我想在3个bootstrap列中动态显示内容。
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
<content>
</div> <---- Problem (should be placed at the very end of the column,
but the same code should also fill 2nd and 3rd columns)
while i fetch the query to mysql. 而我获取查询到mysql。 Also i want object to sort in descending order from left to right (id = 51, id = 50, id = 42 (last digit in the object title is id)) I was able to do that, using row_number and row_number%3=0 row_number%3=1 and row_number%3=2 to display 3 columns, but i have to make 3 queries to the database along with 3 blocks of html(which is bad).
另外,我希望对象按从左到右的降序排序(id = 51,id = 50,id = 42(对象标题中的最后一位是id)),我能够使用row_number和row_number%3 = 0 row_number%3 = 1和row_number%3 = 2显示3列,但我必须对数据库进行3个查询以及3个html块(这很不好)。
SELECT *
FROM (
SELECT
@row_number:=@row_number + 1 AS rownum, id,title, description, ...etc
FROM (
SELECT @row_number:=0) r, flats ORDER BY id DESC) ranked WHERE rownum%3=1 ORDER BY id DESC
But, when i started to implement filters, it caused problems with displaying objects, because not every column had the object i wanted to display, but i had own query for every column. 但是,当我开始实现过滤器时,它会导致显示对象出现问题,因为并非每一列都有我要显示的对象,但是我对每一列都有自己的查询。 Problems with filters
过滤器问题
What i want: Dynamically form 3 separate columns with content to use one MYSQL query. 我想要的是:动态地形成3个单独的列,其内容使用一个MYSQL查询。 Waiting for your help!
等待您的帮助! Example of 1 of 3 columns:
3列中的1列示例:
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
<?php
$zapros = $DB_con->prepare('SELECT *
FROM (
SELECT
@row_number:=@row_number + 1 AS rownum, id,title, description,type, area,address, square, name, phone, email, price, avito, farpost
FROM (
SELECT @row_number:=0) r, flats ORDER BY id DESC) ranked WHERE rownum%3=1 ORDER BY id DESC');
$zapros->execute();
$rowsone=$zapros->rowCount();
if($zapros->rowCount() > 0)
{$tmpCount = 1;
$count=$zapros->rowCount();
while($data=$zapros->fetch(PDO::FETCH_ASSOC))
{
extract($data);
$number=$data['id'];
$imagestm=$DB_con->prepare('SELECT file FROM flats_images WHERE post_id=:uid LIMIT 1');
$imagestm->bindParam(':uid',$number);
$imagestm->execute();
$imgrow=$imagestm->fetch(PDO::FETCH_ASSOC);
extract($imgrow);?>
<div class="well-lg well-smallborders">
<a href="flat.php?flat_id=<?php echo $data['id']; ?>">
<img src="/mysql/uploads/<?php echo $imgrow['file']; ?>" class="img-responsive title-image center-block" /></a>
<div class="flat-price center-block"><?php echo $data['price']; ?><span class="glyphicon glyphicon-rub" aria-hidden="true"></span> </div>
<div class="flat-title"><?php echo $data['title'];?> <?php echo $data['id']; ?></div>
<div class="dimmed-text left"><?php echo $data['type']; ?> </div>
<div class="dimmed-text right"><div class="tooltip_my"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span><?php echo $data['area'];?> <span class="tooltiptext"><?php echo $data['address']; ?></span></div></div>
<br>
<div class="dimmed-text left"><div class="tooltip_my"> <span class="glyphicon glyphicon-phone" aria-hidden="true"></span><?php echo $data['phone'];?><span class="tooltiptext"><?php echo $data['name'];?></span></div></div>
<div class="dimmed-text right"> <?php echo $data['square'];?></div>
<table class="flats-table">
<tr>
<td colspan="3">
<button id="collapsar" class="btn btn-info pull-left" data-toggle="collapse" data-target="#hide-me<?php echo $tmpCount;?>"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> <span class="btntext">Показать миниатюры</span></button>
<a href="flat.php?flat_id=<?php echo $data['id']; ?>" class="btn btn-info pull-left" ><span class="glyphicon glyphicon-eye-open"></span> <span class="btntext">Подробнее ...</span></a>
</td>
</tr>
<tr>
<td colspan="3">
<div id="hide-me<?php echo $tmpCount;?>" class="collapse">
<?
$imagestm2=$DB_con->prepare('SELECT file FROM flats_images WHERE post_id=:uid');
$imagestm2->bindParam(':uid',$number);
$imagestm2->execute();
for ($i = 1; $i <= $imagestm2->rowCount(); $i++) {
$imgrow2=$imagestm2->fetch(PDO::FETCH_ASSOC);
extract($imgrow2); ?>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
<div class="thumbnail"> <img src="mysql\uploads\<?php echo $imgrow2['file']; ?>" data-toggle="modal" data-target="#myModal" class="img-responsive"/></div>
</div>
<?
} ?>
</div>
</td>
</tr>
</table>
</div><?
$tmpCount++;
}}
?>
</div>
Actual result i want: Actual result 我想要的实际结果 : 实际结果
I think you are simply trying to iterate over your results, generate 3 columns of output, and then also apply filters, maybe through Javascript, which hide some of your elements. 我认为您只是在尝试迭代结果,生成3列输出,然后还可能通过Javascript应用过滤器,从而隐藏了一些元素。 The simplest way I know to do that is as follows:
我知道的最简单的方法如下:
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4"></div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4"></div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4"></div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4"></div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4"></div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4"></div>
...
<!-- Bootstrap can manage with only 1 .row -->
</div>
I don't think it's possible to do, what i wanted to do, instead i found much easier way to display content: just unite 3 columns in one and put all data there. 我认为这是不可能的,我想做的是,相反,我发现了一种显示内容的简便得多的方法:将3列合并为一个并将所有数据放在那里。 Ye, it has problems when you open the spoiler, but i think i'll deal with it.
是的,当您打开扰流板时会遇到问题,但我想我会处理的。 Thank you for all your answers.
感谢您的所有答复。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.