This article describes how a Bootstrap Table is created using a given JSON data. The data can be retrieved by either importing it or representing it in JavaScript. The following are given two methods to do it.
Displaying JSON data without importing any file: The JSON file that has to be read can be represented using JavaScript. This can then be given to the Bootstrap Table to represent the data.
Example:
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>
<link rel="stylesheet"
href=
<link rel="stylesheet"
href=
</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>
<script src=
</script>
<script src=
</script>
<script src=
</script>
<script src=
</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>
|
Output:
Displaying JSON data after importing it from a file: The JSON data to be displayed is stored in a local folder in a JavaScript file that is imported. This imported data can then be given to the Bootstrap Table to represent the data. ES6 feature backticks (` `) can be used for the multi-line string value interpolation.
Example:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!