Este artículo describe cómo se crea una tabla Bootstrap utilizando datos JSON determinados. Los datos se pueden recuperar importándolos o representándolos en JavaScript. A continuación se dan dos métodos para hacerlo.
Visualización de datos JSON sin importar ningún archivo: el archivo JSON que se debe leer se puede representar mediante JavaScript. Esto luego se puede dar a la tabla Bootstrap para representar los datos.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no">
<title>
load data from json file
into a bootstrap table
</title>
<!-- Include Bootstrap for styling -->
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Include the Bootstrap Table CSS
for the table -->
<link rel="stylesheet"
href=
"https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css">
</head>
<body>
<div class="container">
<h1 class="text text-success text-center ">
GeeksforGeeks
</h1>
<h6 class="text text-success text-center">
A computer science portal for geeks
</h6>
<table class="table-striped border-success">
<thead>
<tr>
<th data-field="id">
<span class="text-success">
Employee ID
</span>
</th>
<th data-field="name">
<span class="text-success">
Employee Name
</span>
</th>
<th data-field="date">
<span class="text-success">
Joining Date
</span>
</th>
</tr>
</thead>
</table>
</div>
<!-- Include jQuery and other required
files for Bootstrap -->
<script src=
"https://code.jquery.com/jquery-3.3.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
<!-- Include the JavaScript file
for Bootstrap table -->
<script src=
"https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
// Use the given data to create
// the table and display it
$('table').bootstrapTable({
data: mydata
});
});
// Specify the JSON data to be displayed
var mydata =
[
{
"id": "24323",
"name": "Mark Smith",
"date": "25/5/2020"
},
{
"id": "24564",
"name": "Caitlin MacDonald",
"date": "17/5/2020"
},
{
"id": "24345",
"name": "Jessie Johnson ",
"date": "1/5/2020"
},
{
"id": "24874",
"name": "Alen Williams",
"date": "14/5/2020"
},
{
"id": "24323",
"name": "Maria Garcia ",
"date": "13/5/2020"
}
];
</script>
</body>
</html>
Producción:
Mostrar datos JSON después de importarlos desde un archivo: los datos JSON que se mostrarán se almacenan en una carpeta local en un archivo JavaScript que se importa. Estos datos importados luego se pueden pasar a la tabla Bootstrap para representar los datos. Los acentos graves de la función ES6 (` `) se pueden usar para la interpolación de valores de strings de varias líneas.
Ejemplo:
-
Datos JSON: Los datos JSON almacenados en el siguiente ejemplo:
JavaScript
// Contents for test.js// Represents JSON of the datavarda = `[{"id":"24323","name":"Mark Smith","date":"25/5/2020"},{"id":"24564","name":"Caitlin MacDonald","date":"17/5/2020"}]`; -
Programa: para cargar datos de JSON en una tabla Bootstrap
HTML
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1,shrink-to-fit=no"><title>load data from json fileinto a bootstrap table</title><!-- Include Bootstrap for styling --><linkrel="stylesheet"href=<!-- Include the Bootstrap TableCSS for the table --><linkrel="stylesheet"href=</head><body><divclass="container"><h1class="text text-success text-center ">GeeksforGeeks</h1><h6class="text text-success text-center">A computer science portal for geeks</h6><tableclass="table-striped border-success"><thead><tr><thdata-field="id"><spanclass="text-success">Employee ID</span></th><thdata-field="name"><spanclass="text-success">Employee Name</span></th><thdata-field="date"><spanclass="text-success">Joining Date</span></th></tr></thead></table></div><!-- Include jQuery and other required files for Bootstrap --><scriptsrc=</script><scriptsrc=</script><scriptsrc=</script><!-- Include the JavaScript file for Bootstrap table --><scriptsrc=</script><!-- Include the file where the JSON data is stored --><scripttype="text/javascript"src="test.js"></script><scripttype="text/javascript">$(document).ready(function() {// Use the given data to create// the table and display it$('table').bootstrapTable({data: mydata});});// Parse the imported data as JSON// and store itvar mydata = JSON.parse(da)</script></body></html> -
Producción:
Publicación traducida automáticamente
Artículo escrito por abhishekkharmale y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA