在bootstrap-table上加载数据

时间:2016-09-12 13:47:35

标签: php css twitter-bootstrap bootstrap-table

我创建了一个带有bootstrap框架的网站。在这个网站上,我加载了一个包含数据库记录的表,我使用php进行此操作。

我的问题是:php是在桌面上加载数据的最佳方式还是有更好的选择?

此外,当它加载网站中的数据时,首先显示没有格式的文本,并在1秒后显示css样式:(

这是代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>AddCloud - Edicions</title>

        <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/bootstrap-table/dist/bootstrap-table.css">

</head>
<body>
<?php
    session_start();

    if(isset($_SESSION['username']) and $_SESSION['username'] <> ''){
?>
        <nav class="navbar navbar-default">
          <div class="container-fluid"> 
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
              <a class="navbar-brand" href="http://www.addvantage.es"><font color=#8abe44>AddCloud</font></a></div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="defaultNavbar1">
              <ul class="nav navbar-nav">
                <li class="active"><a href="edicions.php">Edicions<span class="sr-only">(current)</span></a></li>
                <li><a href="productes.php">Productes</a></li>
              </ul>
              <ul class="nav navbar-nav navbar-right">
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-user"></span> <?php echo $_SESSION['username'] ?></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="preferences.html"><span class="glyphicon glyphicon-wrench"></span>  preferències</a></li>
                    <li><a href="changepassword.html"><span class="glyphicon glyphicon-lock"></span>  canviar password</a></li>
                    <li class="divider"></li>
                    <li><a href="logout.php"><span class="glyphicon glyphicon-log-out"></span>  log out</a></li>
                  </ul>
                </li>
              </ul>
            </div>
            <!-- /.navbar-collapse --> 
          </div>
          <!-- /.container-fluid --> 
        </nav>
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-6 col-md-offset-3">
              <h1 class="text-center">Miquel Alimentació</h1>
            </div>
          </div>
          <hr>
        </div>
        <div class="container">
          <div class="row text-center">
            <div class="col-md-6 col-md-offset-3"><h3>Edició 12</h3></div>
          </div>
          <hr>
          <div class="row">
            <?php  
                    // Conexió a la base de dades
                    include("connect.php");  
                    $conn = Conectarse("localhost", "5432", "dbname", "dbuser", "dbpass");  
                    //query
                    $query = "SELECT * FROM produccion.ma_origen ORDER BY id_articulo ASC";
                    $result = pg_query($conn, $query);  
                    //se despliega el resultado  
                    echo "<table id='table'
                                   data-toggle='table'
                                   data-toolbar='#toolbar'
                                   data-show-refresh='true'
                                   data-show-toggle='true'
                                   data-sort-name='name'
                                   data-sort-order='desc'
                                   data-show-columns='true'
                                   data-pagination='true'
                                   data-search='true'
                                   data-click-to-select='true'>";
                        echo "<thead class='thead-inverse'>";
                            echo "<tr>";  
                                echo "<th data id='seleccion' data-switchable='false' data-checkbox='true'></th>";  
                                echo "<th data id='pagina' data-sortable='true'>pagina</th>";  
                                echo "<th data id='codigo' data-sortable='true' data-switchable='false'>codigo</th>";  
                                echo "<th data id='descripcion' data-sortable='true' data-switchable='false'>descripcion</th>";  
                                echo "<th data id='pvp-cat' data-sortable='true'>pvp-cat</th>"; 
                                echo "<th data id='pvp-lev' data-sortable='true'>pvp-lev</th>"; 
                                echo "<th data id='pvp-and' data-sortable='true'>pvp-and</th>"; 
                                echo "<th data id='pvp-cen' data-sortable='true'>pvp-cen</th>"; 
                                echo "<th data id='pvp-nor' data-sortable='true'>pvp-nor</th>"; 
                                echo "<th data id='pvp-vas' data-sortable='true'>pvp-vas</th>";  
                                echo "<th data id='fecha-mod' data-sortable='true'>fecha-mod</th>";
                                echo "<th data id='user' data-sortable='true' data-visible='false'>user</th>";
                            echo "</tr>"; 
                        echo "</thead>"; 
                        echo "<tbody>";
                    while ($row = pg_fetch_row($result)){   
                            echo "<tr>";  
                                echo "<td></td>";
                                echo "<td>$row[2]></td>";  
                                echo "<td>$row[3]</td>";  
                                echo "<td>$row[4]</td>";  
                                echo "<td>$row[5]</td>"; 
                                echo "<td>$row[6]</td>"; 
                                echo "<td>$row[7]></td>";  
                                echo "<td>$row[8]</td>";  
                                echo "<td>$row[9]</td>";  
                                echo "<td>$row[10]</td>"; 
                                echo "<td>$row[11]</td>"; 
                                echo "<td>$row[12]</td>";
                            echo "</tr>";  
                    }  
                        echo "</tbody>";
                    echo "</table>";  
                ?>
            </div>
          </div>
          <hr>
          <div class="row">
            <div class="text-center col-md-6 col-md-offset-3">
              <p>Copyright &copy; 2016 &middot; All Rights Reserved &middot; <a href="http://www.addvantage.es/" >http://www.addvantage.es</a></p>
            </div>
          </div>
          <hr>
        </div>
    <script>    
        $("td").dblclick(function(){
            alert("The paragraph was double-clicked");
        });
    </script>   
        <script src="assets/jquery/jquery.min.js"></script>
        <script src="assets/bootstrap/js/bootstrap.min.js"></script>
        <script src="assets/bootstrap-table/dist/bootstrap-table.js"></script>
<?php
    } else{
        ?><p>La sesión no está activa, por favor ingrese <a href="login_ok.html">aquí</a></p>
<?php
    }?>


</body>
</html>

请问你能解决这个问题吗?

谢谢!

2 个答案:

答案 0 :(得分:0)

使用Ajax获取数据,并使用.append()* function(jQuery),填写$(document).ready()或任何其他触发事件的表。

*         jQuery.each(data, function(index, value) { $("#table_div").append("<tr><td>" + value + "</td></tr>"); });

您可以查看以下示例。

var mydata = [{"Nome":"",
               "Cognome":"",
               "DataN":"0000-00-00",
               "Provincia":"",
               "Comune":"",
               "CAP":"",
               "Indirizzo":"",
               "Fisso":"",
               "Mobile":"",
               "Note":""},
              {"Nome":"Federico",
               "Cognome":"Lupieri",
               "DataN":"2015-09-16",
               "Provincia":"",
               "Comune":"",
               "CAP":"34170",
               "Indirizzo":"Via Ascoli 1",
               "Fisso":"00112233445566",
               "Mobile":"00112233445566",
               "Note":"Vediamo se funziona questo"}];

$(document).ready(function(){
  $.ajax({
       url: '/echo/json/',
       dataType: 'json',
       success: function(data) {
           //alert('done');
           $('#clienti').bootstrapTable({
              data: mydata
           });
       },
       error: function(e) {
           console.log(e.responseText);
       }
    });
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="display table table-bordered" id="clienti">
  <thead>
    <tr>
      <th data-field="Nome">Nome</th>
      <th data-field="Cognome">Cognome</th>
      <th data-field="DataN">Data Nascita</th>
      <th data-field="Provincia">Provincia</th>
      <th data-field="Comune">Comune</th>
      <th data-field="CAP">CAP</th>
      <th data-field="Indirizzo">Indirizzo</th>
      <th data-field="Fisso">Fisso</th>
      <th data-field="Mobile">Cellulare</th>
      <th data-field="Note">Note</th>
    </tr>
  </thead>
</table>

使用Ajax获取数据,然后直接填写表格,以便在网站上看到的任何数据都将在表格中排序。

答案 1 :(得分:0)

至于你的问题: &#34;我的问题是:php是在桌面上加载数据的最佳方式还是有更好的选择?&#34;

答:如果您正在加载从源(例如:数据库或文件)检索的动态数据,那么执行此操作的最佳方式(或唯一方法)是通过像您提到的PHP这样的脚本语言。