无法使用 Javascript 使引导表加载数据答案

【问题标题】：Could not make bootstrap-table to load data using using Java script无法使用 Javascript 使引导表加载数据
【发布时间】：2021-08-02 09:12:28
【问题描述】：

我是尝试学习引导表的新手，并且一直在努力使用 javascript 加载基本数据。下面的代码似乎有效，但返回结果“未找到匹配的记录”。

将感谢有关我做错了什么的指导。

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, Bootstrap Table!</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css">
  </head>
  <body>
    <table id="table" data-toggle="table" ></table>

    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
<script>
   var data = '[{"id": 0,"name": "Item 0","price": "$0"}, {"id": 1,"name": "Item 1","price": "$1"},{"id": 2,"name": "Item 2","price": "$2"}]';
   data_json=JSON.parse(data);
   $('#table').bootstrapTable('load',data_json);
</script>
  </body>
</html>

【问题讨论】：

标签： bootstrap-4

【解决方案1】：

请将您的$('#table').bootstrapTable() 更改为以下内容：

<script>
    var data = '[{"id": 0,"name": "Item 0","price": "$0"}, {"id": 1,"name": "Item 1","price": "$1"},{"id": 2,"name": "Item 2","price": "$2"}]';
    data_json=JSON.parse(data);
    $('#table').bootstrapTable({
        data: data_json
    });
</script>

好的，您现在将看到一个空白页面（没有No matchign records）。将 HTML 中的 <table> 标记更改为以下内容：

<table id="table" data-toggle="table" >
  <thead>
    <th>Item ID</th>
    <th data-field="name">Item Name</th>
    <th data-field="price">Item Price</th>
  </thead>
</table>

<thead> 必须存在，以便bootstrap-table 知道要显示哪个。

【讨论】：

您的建议效果很好！非常感谢。我添加了： Item ID 以正确显示“id”列