Загрузить данные в загрузочную таблицу
Я сделал сайт с фреймворком начальной загрузки. На этом сайте я загружаю таблицу с записями базы данных, для этого я использовал 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 © 2016 · All Rights Reserved · <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>
Пожалуйста, не могли бы вы помочь мне с этим вопросом?
Спасибо!
Решение
Что касается вашего вопроса:
«Мой вопрос: php — лучший способ загрузить данные в таблицу, или есть лучший вариант?»
A: Если вы загружаете динамические данные, которые извлекаются из источника (например, из базы данных или файла), то лучший (или единственный) способ сделать это — использовать язык сценариев, такой как PHP, как вы упоминали.
Другие решения
Получите ваши данные с помощью Ajax и, используя функцию .append () * (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, а затем заполните свою таблицу напрямую, поэтому любые данные, которые будут отображаться на веб-сайте, будут отсортированы в таблице.