Need to dynamically add a class to a table populated by json data and using bootstrapTable

Question

I have managed to work out how to pull in data via json and populate a table with bootstraptable().

One of the columns is a city name - I want to make that a class on the td so that I can add the country flag via css.

Here's what I have so far:

    $(document).ready(function(){
        var i = 0;
        var stockInterval;
        var doRequest = function(selector, reportName){
            var jsonpCallback = 'jsonCallback' + (i++)
            $.ajax({
                type: 'GET',
                url: 'ipaddressgoesheere' + reportName + '/' + jsonpCallback,
                async: true,
                selector: selector,
                jsonpCallback: jsonpCallback,
                contentType: "application/json",
                dataType: 'jsonp',
                success: function (data) {
                    $(selector)
                        .bootstrapTable('load', data);
                },
                error: function (e) {
                    console.log(e);
                }
            });
        }

        $('#allReport').bootstrapTable({
            data: []
        });
        doRequest('#allReport', 'misIntradaySummary')
        setInterval(function () {
            doRequest('#allReport', 'misIntradaySummary');
        }, 1000);

        $('#marketsReport').bootstrapTable({
            data: [],
            columns: [{
            field: 'state',
            checkbox: true
        }, {
            field: 'city',
            title: 'City',
            align: 'right',
            valign: 'bottom',
            sortable: true
        }, {
            field: 'name',
            title: 'Item Name',
            align: 'center',
            valign: 'middle',
            sortable: true,
            formatter: nameFormatter
        }, {
            field: 'price',
            title: 'Price',
            align: 'left',
            valign: 'top',
            sortable: true,
    }],
            onClickRow: function(row){
                doRequest('#stockReport', 'topStocks_'+row.marketId)
                clearInterval(stockInterval);
                stockInterval = setInterval(function () {
                    doRequest('#stockReport', 'topStocks_' + row.marketId)
                }, 1000);
            }
        });

        $('#stockReport').bootstrapTable({
            data: []
        });
        doRequest('#marketsReport', 'misIntradayMarket')
        setInterval(function () {
            doRequest('#marketsReport', 'misIntradayMarket');
        }, 1000);
    });

Any ideas when I break up the data into columns how I can then use 'city' as a class name for the TD?

Answer 1

you can add class in field options as per bootstrap-table document

    $('#marketsReport').bootstrapTable({
        data: [],
        columns: [{
        field: 'state',
        checkbox: true
    }, {
        field: 'city',
        title: 'City',
        class : 'city',
        align: 'right',
        valign: 'bottom',
        sortable: true
    }] 

Add this event to your page in side document ready function

   $('#marketsReport').on('load-success.bs.table',function(e, text){
       $('#marketsReport').find('.city').each(function(){
           $(this).addClass($(this).text());
        });
   });

demo table on document

$('#table').bootstrapTable({
url: 'data1.json',
columns: [{
    field: 'id',
    title: 'Item ID'
    class : 'id',
}, {
    field: 'name',
    title: 'Item Name'
    class : 'name',
}, {
    field: 'price',
    title: 'Item Price'
    class : 'price',
}, ]
});