Bootstrap-table: Setting Columns with JSON? (QUESTION/ISSUE)

[cgountanis]

Is it possible to set the columns property with JSON? Example below shows setting the data with AJAX JSON data but can it be done for the columns as well?

 $table.bootstrapTable({
                filterControl: true,
                disableUnusedSelectOptions: true,
                data: data,
                height: getHeight(),
                search: true,
                columns: [{
                    field: 'selected',
                    checkbox: true,
                    align: 'center'
                },

I have tried with this JSON data and no columns show up.

[
{"field":"selected","checkbox":true,"align":"center","title":null,"formatter":null,"sortable":false,"filterControl":null,"filterControlPlaceholder":null,"filterStrictSearch":false},

{"field":null,"checkbox":false,"align":"center","title":"Actions","formatter":"actionsFormatter","sortable":false,"filterControl":null,"filterControlPlaceholder":null,"filterStrictSearch":false},

{"field":"id","checkbox":false,"align":"center","title":"ID","formatter":null,"sortable":true,"filterControl":"input","filterControlPlaceholder":"Search","filterStrictSearch":false},

{"field":"cabinet","checkbox":false,"align":"center","title":"Cabinet","formatter":null,"sortable":true,"filterControl":"input","filterControlPlaceholder":"Search","filterStrictSearch":false},

{"field":"drawer","checkbox":false,"align":"center","title":"Drawer","formatter":null,"sortable":true,"filterControl":"input","filterControlPlaceholder":"Search","filterStrictSearch":false}
]

[djhvscf]

Please provide a jsFiddle to show your problem, thanks!

[cgountanis]

The example is given you can not provide an example as the JSON would have to come from a service that is internal to the application.

So in my example above I am showing how to set the columns with JS. The data above is a JSON variable. I would like to do the same thing with columns.

The question is more-less can you set the bootstrap table properties like "columns" with a variable containing JSON? I have had no luck so far. I could maybe go as far as the whole object as JSON if that is easier.

[djhvscf]

You can use myJson.con in order to have a fake "serverside", for example: https://api.myjson.com/bins/sytlu

[cgountanis]

OK, think this should do to get the basic point across.

https://jsfiddle.net/ChrisGo/94vu6p0L/

[cgountanis]

Maybe the data-url can accept the data and columns or something. It would seem the data passes and the columns passing as well, otherwise it would be blank but the data is not being mapped. Show details is doomed as well but might be a topic for another day. Long story short, will have a JSON with root.DATA and root.COLUMNS in one call and would love to just one shot it right in as variables while doing initTable().

Is there a better way?

I might just be missing something easy?

[djhvscf]

I just found an issue with this approach, let me show you:

This line should be:

if (func !== null && typeof func === 'object') {
    return func
}

[cgountanis]

Is there a dev CDN I can switch in the Fiddle to test quick?

[djhvscf]

At this moment we need to apply that change under development branch so you can test.

Also you can try to modify that line on your end and let us know the results.

[cgountanis]

Confirmed it seems to be accepting the JSON via JS and populating the columns and data properly now.

Primitive example in case someone stumbles on this. Keep in mind the JSON has values needed for the column filter control which you might not need.

$table.bootstrapTable({
    height: getHeight(),
    data: fromAJAXJSON.data,
    columns: fromAJAXJSON.columns
});

In a perfect world you would most likely want to combine the data and columns into one JSON call for timing reasons rootObject.data/rootObject.columns but you get the point.
Example data JSON: https://api.myjson.com/bins/r8nya
Example columns JSON: https://api.myjson.com/bins/zkqf6

Since then though we have decided to use JSON for the DATA in the HTML (data-url) and just dynamically create the THEAD part of the HTML to save some headaches. Using JS just for the client side logic as most of the examples have.

Good fix though for the next release in case someone wants to dynamically specify data and columns via JSON within JS directly though! Thank you...

[djhvscf]

Great! @cgountanis