Search code examples
jsonbootstrap-4bootstrap-table

load data in bootstrap-table from json

recently I got familiar with bootstrap-table, I am trying to load data from a JSON file. Based on the documentation, I try using:

data-url="json/data.json"

and also:

id="person"

and for load data I use the following code:

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

but it doesn't show anything. Would you please give me some tips regarding this issue?

Solution

  • I managed to get a demo working using your json code hosted on jsonbin.io

    Here is your json... https://api.jsonbin.io/b/5f9dfe423269193b17bffab2

    In the json you sent me, there was only 1 row. So I've added a 2 more extra example rows to show the data loading in the table.

    Things that you were missing...

    First yes you were missing [ ] wrapping the row data. When coding your table json think of the json layout table like this...

    [
   // 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...
]

    Then to assign this data to the relevant table column, in the table head cell, use data-field attribute with the json row key and sub key Nayment.Name.

    If you want a first name and last name I guess you will have to separate this data up in your json.

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

    You can also you use deeper levels of data just by extending the sub key, like with your balance details Nayment.BalanceDetails.PowerCash

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

    See live demo below with your 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>