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

doujin8673
doujin8673 尝试在代码中使用Ajax
大约 4 年之前 回复
duanbaque4230
duanbaque4230 显示你的代码。
大约 4 年之前 回复

2个回答



至于你的问题:
“我的问题是:php是在桌面上加载数据的最佳方式,或者有一个 更好的选择?“ </ p>

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

展开原文

原文

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

A: If you are loading dynamic data that is retrieved from a source (eg: database or a file), then the best way (or the only way) to do this is through a scripting language like PHP as you have mentioned.

doukesou4452
doukesou4452 是的,我从postgresql数据库中检索数据。 我没有网络环境的经验,通常我编写Java或bash脚本。
大约 4 年之前 回复

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>
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐