Automatically create header from JSON file, Bootstrap-table

Question

I'm working with this bootstrap library and actually everything works fine. The question is, Can bootstrap-table generate header automatically in depend of JSON file? I've tried to find any information about that, but unlucky. Now my header is generated from script like from this example:

function initTable() {
$table.bootstrapTable({
    height: getHeight(),
    columns: [{
        field: 'field1',
        title: 'title1',
        sortable: true

    }, {
        field: 'field2',
        title: 'title2',
        sortable: true
    }, {
        field: 'field3',
        title: 'title3',
        sortable: true
    }, {
        field: 'Actions',
        title: 'Item Operate',
        align: 'center',
        events: operateEvents,
        formatter: operateFormatter
    }
    ],
    formatNoMatches: function () {
        return "This table is empty...";
    }

});

Does anyone how to generate header automatically?

Answer 1

Populating from a flat json file is definetly possible but harder than from a seperate (slimmer and preped) data request, because title and other attributes 'might' have to be guessed at.

Ill show basic approach, then tell you how to make it work if stuck with a flat file that you CAN or CANT affect the format of (important point, see notes at end).

---

Make a seperate ajax requests that populates var colArray = [], or passes direct inside done callback.

For example, in callback (.done(),.success(), ect) also calls to the function that contains the js init code for the table.

You might make it look something like this:

function initTable(cols) {
    cols.push({
            field: 'Actions',
            title: 'Item Operate',
            align: 'center',
            events: operateEvents,
            formatter: operateFormatter
        });
    $("#table").bootstrapTable({
        height: getHeight(),
        columns: cols,
        formatNoMatches: function () {
            return "This table is empty...";
        }

    });
}

$(document).ready(function(){
    $.ajax({
      method: "POST",
      url: "data/getColumns",
      // data: { context: "getColumns" }
      datatype: "json"
    })
    .done(function( data ) {
       console.log( "getCols data: ", data );
       // Prep column data, depending on what detail you sent back
       $.each(data,function(ind,val){
           data.sortable = true;
       });
       initTable(data);
    });
});

---

Now, if you are in fact stuck with a flat file, point the ajax towards that then realise the question is whether you can edit the contents.

If yes, then add a columns array into it with whatever base data (title, fieldname, ect) that you need to help build your columns array. Then use responseHandler if needed to strip that columns array if it causes issues when loading into table.

http://bootstrap-table.wenzhixin.net.cn/documentation/#table-options http://issues.wenzhixin.net.cn/bootstrap-table/ (click 'see source').

---

If no, you cant edit contents, and only have the fieldname, then look at using that in the .done() handler with whatever string operation (str_replace(), ect) that you need to make it look the way you want.