Блог

недавно я познакомился с bootstrap-таблицей, я пытаюсь загрузить данные из файла JSON. Основываясь на документации, я пытаюсь использовать:

 data-url="json/data.json"
  

а также:

 id="person"
  

и для загрузки данных я использую следующий код:

 <th data-field="FName" data-sortable="true">First Name</th>
  

но это ничего не показывает. Не могли бы вы дать мне несколько советов по этому вопросу?

Мне удалось запустить демонстрационную версию, используя ваш код json, размещенный на jsonbin.io

Вот ваш json… https://api.jsonbin.io/b/5f9dfe423269193b17bffab2

В json, который вы мне прислали, была только 1 строка. Итак, я добавил еще 2 дополнительных примера строк, чтобы показать загрузку данных в таблицу.

Вещи, которые вам не хватало…

Сначала да, вам не хватало [ ] переноса данных строки. При кодировании вашей таблицы в формате json подумайте о таблице компоновки json следующим образом…

 [
   // this is your table body
   {
      // this a table row
      // set tr key
      "Nayment" : {
         
         // then define each td with a sub key / value
         "Id": 24,
         "Name": "Jack Allen",
         "TotalCost": 1000,

         // etc...
      }
   },
   {
      // next table row
      // tr key
      "Nayment" : {

          // etc...
      }
   },

   // etc...
]
  

Затем, чтобы назначить эти данные соответствующему столбцу таблицы, в ячейке заголовка таблицы используйте data-field атрибут с ключом строки json и вспомогательным ключом Nayment.Name .

Если вам нужны имя и фамилия, я думаю, вам придется разделить эти данные в вашем json.

 <th data-field="Nayment.Name" data-sortable="true">Name</th>
  

Вы также можете использовать более глубокие уровни данных, просто расширив вспомогательный ключ, например, с информацией о вашем балансе Nayment.BalanceDetails.PowerCash

 <th data-field="Nayment.BalanceDetails.PowerCash" data-sortable="true">Balance: Power Cash</th>
  

Смотрите демонстрацию ниже с вашим json…

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.css">

<div class="container">
  <table id="table" data-toggle="table" data-flat="true" data-search="true" data-url="https://api.jsonbin.io/b/5f9dfe423269193b17bffab2">
    <thead>
      <tr>
        <th data-field="Nayment.Id" data-sortable="true">ID</th>
        <th data-field="Nayment.Name" data-sortable="true">Name</th>
        <th data-field="Nayment.RemainCash" data-sortable="true">Remaining Cash</th>
        <th data-field="Nayment.TotalAsset" data-sortable="true">Total Assets</th>
        <th data-field="Nayment.BalanceDetails.PowerCash" data-sortable="true"><small>Balance Details</small><br/>Power Cash</th>
        <th data-field="Nayment.BalanceDetails.BlockedCash" data-sortable="true"><small>Balance Details</small><br/>Blocked Cash</th>
        <th data-field="Nayment.BalanceDetails.creditCash" data-sortable="true"><small>Balance Details</small><br/>Credit Cash</th>
        <th data-field="Nayment.BalanceDetails.AccountCash" data-sortable="true"><small>Balance Details</small><br/>Account Cash</th>
      </tr>
    </thead>
  </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.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>
<script src="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.js"></script>