如何将数据从JSON加载到Bootstrap表格中（）

本文概述

HTML代码示例
JavaScript代码
HTML代码示例

本文介绍如何使用给定的JSON数据创建Bootstrap表。可以通过导入数据或用JavaScript表示数据来检索数据。下面给出了两种执行此操作的方法。
在不导入任何文件的情况下显示JSON数据：可以使用JavaScript表示必须读取的JSON文件。然后可以将其提供给Bootstrap表来表示数据。
例子：
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 "> lsbin < /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 = https://www.lsbin.com/[ {"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>

输出如下：

文章图片
从文件导入后显示JSON数据：要显示的JSON数据存储在导入的JavaScript文件中的本地文件夹中。然后可以将此导入的数据提供给Bootstrap表以表示数据。 ES6功能反引号(``)可用于多行字符串值插值。
例子：
【如何将数据从JSON加载到Bootstrap表格中（）】JSON数据：的JSON数据存储在以下示例中：
JavaScript代码

//Contents for test.js //Represents JSON of the datavar da = `[ { "id" : "24323" , "name" : "Mark Smith" , "date" : "25/5/2020" }, { "id" : "24564" , "name" : "Caitlin MacDonald" , "date" : "17/5/2020" } ]`;

程序：将数据从JSON加载到Bootstrap表中
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 "> lsbin < /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> < !-- Include the file where the JSON data is stored --> < script type = "text/javascript" src = "https://www.lsbin.com/test.js"> < /script> < script type = "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 it var mydata = https://www.lsbin.com/JSON.parse(da) < /script> < /body> < /html>

输出如下：