Loading JSON into Table without Bootstrap-Table

Question

So I currently have a table that I know how to populate via How to load JSON data into Bootstrap table?

My question is more curiosity based. Would it be possible to load JSON data into a Bootstrap powered table without using the bootstrap-table library?

You mean, to generate a regular HTML table with JSON data and then convert it into a Bootstrap table? You can create a jQuery plugin. — Mr. Polywhirl, Jan 04 '17 at 14:18

score 1 · Answer 1 · answered Jan 04 '17 at 14:44

1

The answer is yes. You can edit all HTML with JS, so as long as you write the correct script you'll be able to deserialise the JSON and populate the table

answered Jan 04 '17 at 14:44

score 1 · Answer 2 · answered Jan 04 '17 at 14:46

What you need is just a template, which can work with json data to generate html dom structure like bootstrap table.

Use ExtJS XTemplate as an example:

// this is a template
var tableTemplate = new Ext.XTemplate(
  '<table class="table {tableClass}">',
    '<thead>',
      '<tr>',
        '<tpl for="columns">',
          '<th>{name}</th>',
        '</tpl>'
      '</tr>',
    '</thead>',
    '<tbody>',
      '<tpl for="row in rows">',
        '<tr>',
          '<tpl for="column in columns">',
            '<td>{row[column]}</td>',
          '</tpl>'
        '</tr>',
      '</tpl>',
    '</tbody>',
  '</table>'
);

// this is the data load from end-server
var data = {
    columns: [{
        name: 'a'
    }, {
        name: 'b'
    }, {
        name: 'c'
    }],
    rows: [{
        a: 'a1',
        b: 'b1',
        c: 'c1'
    }, {
        a: 'a2',
        b: 'b2',
        c: 'c2'
    }, {
        a: 'a3',
        b: 'b3',
        c: 'c3'
    }]
};

//generate html with template and data 
tableTemplate.overwrite(dom, data);

score 1 · Answer 3 · answered Jan 04 '17 at 14:51

This is a simple; extensible jQuery plugin that I whipped up which can be easily modified.

You just need to pass an object into is with columns and records data.

I stored the sample JSON in an invisible TextArea and simply retrieved and parsed the data before sending it to the plugin function.

(function($) {
  $.fn.populateTable = function(tableData) {
    $('<thead>').append($('<tr>').append(tableData.columns.map(function(column) {
      var colIsObj = column !== null && typeof column === 'object';
      var dataIndex = colIsObj ? column.fieldName : column;
      var displayText = colIsObj && column.text != '' ? column.text : dataIndex;
      return $('<th>').text(displayText);
    }))).appendTo(this);
    $('<tbody>').append(tableData.records.map(function(record) {
      return $('<tr>').append(tableData.columns.map(function(column) {
        var colIsObj = column !== null && typeof column === 'object';
        var dataIndex = colIsObj ? column.dataIndex : column;
        var value = colIsObj && column['convert'] != null ? column.convert(record) : record[dataIndex];
        return $('<td>').text(value).css(colIsObj ? (column.css || {}) : {});
      }));
    })).appendTo(this);
    return this;
  };
})(jQuery);

var tableData = {
  "columns" : [ 
    "id",
    {
      //"dataIndex" : "name", <-- Optional if text is defined.
      "text" : "Full Name",
      "convert" : function(record) {
        return record.givenName + " " + record.surname;
      }
    }, {
      "dataIndex" : "dob",
      "text" : "Date of Birth",
      "convert" : function(record) {
        return moment(record.dob).format('MMMM Do, YYYY');
      },
      "css" : {
        "text-align" : "center"
      }
    }
  ],
  "records" : JSON.parse(document.getElementById('json-data').innerHTML)
};

$('#data-table').populateTable(tableData);

#json-data { display: none; }
#data-table, #data-table th, #data-table td { border-collapse: collapse; border: thin solid black; }
#data-table th, #data-table td { padding: 0.25em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>

<textarea id="json-data">[ {
  "id" : 1,
  "givenName" : "John",
  "surname" : "Doe",
  "dob" : "1950-12-31"
  }, {
  "id" : 2,
  "givenName" : "Jane",
  "surname" : "Doe",
  "dob" : "1968-07-04"
} ]</textarea>
<table id="data-table"></table>

Loading JSON into Table without Bootstrap-Table

3 Answers3