dongyao5843 2016-09-12 13:47
浏览 97

在bootstrap-table上加载数据

I have made a website with bootstrap framework. In this website I load a table with records of the database, I using php for this.

My question is: php is the best way to load a data on the table or there are a better option?

Also when it's load the data in the website, first it show the text without format and after 1 second show with the css styles :(

This is the code:

<!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>

Please Could you help me with this issues?

Thanks!

  • 写回答

2条回答

  • dongyi7041 2016-09-12 13:57
    关注

    Get your data with Ajax, and using .append()* function (jQuery), fill the table on $(document).ready() or any other triggered event.

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

    You can check the example below.

    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>

    Get your data with Ajax and then fill your table directly, so any data that will be seen on website will be sorted in the table.

    </div>
    
    评论

报告相同问题?

悬赏问题

  • ¥15 如何实验stm32主通道和互补通道独立输出
  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据,怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据,怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题