用手风琴打印php数据库值

时间:2016-07-29 10:50:59

标签: php html

我想在左手风琴中打印一半表记录,在右div中打印剩余的一半记录。我使用以下代码。我在表中列了两列。我有记录。例如,如果表中有4条记录,那么前两条记录应该放在左手风琴上,接下来的两条记录应该放在右侧手风琴上。我使用以下代码。

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "data";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "SELECT id, price FROM demo";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
        print_r($row);
    }
} else {
    echo "0 results";
}
$conn->close();
?>


    <head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>

<body>
<div class="ordinary">
 <div class="container">
   <div class="row main-row">


<!--left-->
<div class="col-md-6">
      <div class="col-inner left-col">
          <div class="accordion-group" id="accordion">
              <div class="accordion-panel" >
                  <div class="heading glyphicon-custom">
                         <h4 class="title left-title">
                            <a class="accordion-toggle title-font" data-toggle="collapse" data-parent="#accordion" href="#panel1"><i class="glyphicon glyphicon-plus gly-font  "></i><span class="title-panel">Antipasti</span></a>
                         </h4>
                  </div>


          <div id="panel1" class="panel-collapse collapse">
                <div class="contain-body">   
                    <div class="su-spoiler-content su-clearfix inner-content">
                        1  



                      </div>
                  </div>

              </div>
          </div>
     </div>



</div>





<!--make it 50% -->


<div class="col-inner left-col">
          <div class="accordion-group" id="accordion">
              <div class="accordion-panel" >
                  <div class="heading glyphicon-custom">
                         <h4 class="title left-title">
                            <a class="accordion-toggle title-font" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="glyphicon glyphicon-plus gly-font  "></i><span class="title-panel">Antipasti</span></a>
                         </h4>
                  </div>


          <div id="panel2" class="panel-collapse collapse">
                <div class="contain-body">   
                    <div class="su-spoiler-content su-clearfix inner-content">
                      2    


                      </div>
                  </div>

              </div>
          </div>
     </div>



</div>

 </div>  <!-- left-col-md-6 ends here -->



<div class="col-md-6 ">
      <div class="col-inner right-all">

                <div class="accordion-group" id="accordion">
                    <div class="accordion-panel" >
                        <div class="heading glyphicon-custom">
                          <h4 class="title">
                              <a class="accordion-toggle title-font" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="glyphicon glyphicon-plus gly-font  "></i><span class="title-panel">Antipasti</span></a>
                          </h4>
                        </div>


                <div id="panel3" class="panel-collapse collapse">
                          <div class="contain-body">   
                                <div class="su-spoiler-content su-clearfix inner-right">
                                    3

                                      </div>
                              </div>

                        </div>
                  </div>
            </div>



       </div>

<!-- accordian  -->
 <div class="col-inner right-all">

                <div class="accordion-group" id="accordion">
                    <div class="accordion-panel" >
                        <div class="heading glyphicon-custom">
                          <h4 class="title">
                              <a class="accordion-toggle title-font" data-toggle="collapse" data-parent="#accordion" href="#panel4"><i class="glyphicon glyphicon-plus gly-font  "></i><span class="title-panel">Antipasti</span></a>
                          </h4>
                        </div>


                <div id="panel4" class="panel-collapse collapse">
                          <div class="contain-body">   
                                <div class="su-spoiler-content su-clearfix inner-right">
                                   4
                                </div>
                              </div>

                        </div>
                  </div>
            </div>


       </div>

 <br/>

</div>  <!-- right-col-md-6 ends here -->







   </div>
  </div>
</div>



<script type="text/javascript">
var selectIds =$('#panel1,#panel2,#panel3,#panel4');
$(function ($) {

      selectIds.on('hidden.bs.collapse show.bs.collapse', function () {
      $(this).prev().find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
    })
});
</script>
</body>

1 个答案:

答案 0 :(得分:2)

试试这个:

<?php   
    while($row = fetch_row($result)){
        $rows[]=$row;
    }
?>

左手风琴内侧

<?php        
    for($i=0;$i < count($rows)/2;$i++){
        echo $row[$i]['id']; //or whatever you want
    }
?>

右手风琴

<?php        
    for($i=count($rows)/2;$i < count($rows); $i++){
        echo $row[$i]['id']; //or whatever you want
    }
?>