Multiple data fields in bootstrap table

Question

In my database, I have fields fname and lname. I am using a Bootstrap Table to display the results to the user. What I would like to do is concatenate the two fields to display under one column called Name.

This currently works, albeit it the first and last name are in separate columns. I want to combine them into the same column.

<th data-field="fname">First Name</th>
<th data-field="lname">Last Name</th>
<th data-field="title">Title</th>
<th data-field="position">Position</th>
<th data-field="cell">Cell</th>
<th data-field="home">Home</th>
<th data-field="workgroup">Workgroup</th>

I searched the documentation, but didn't see any examples. Thanks!

Dogy

Answer 1

Perhaps try the "data-formatter" in the column section of http://bootstrap-table.wenzhixin.net.cn/documentation/ ?

The template:

<table>
<th data-field="firstname"
    data-formatter="nameFormatter"></th>
</table>

The javascript:

function nameFormatter(value, row, index) {
    return value + " " + row.lastname;
}

Biggin

This doesn't work mate, the variable row does not resolve. – Hardeman

there is a problem if lastname has a space e.g. (John Moore Williams where 'Moore Williams' is the lastname – Cristinacristine

if lastname has spaces you need to use JSON.stringify(row.lastname) – Cristinacristine

Answer 2

The solution of @sasha works for me.

For example to show lat and lon of a point:

<table>
<th data-field="id"
    data-formatter="nameFormatter"></th>
</table>

javascript:

<script>
function nameFormatter(value, row, index) {
   return 'lat:'+ row.lat + " ,lon:" + row.lon;
} 
</script>

Cristinacristine

Answer 3

Just in case anyone is using React Bootstrap Table, we use formatter.

const columns = [
    {
        dataField: 'Product.name',
        formatter: (value, row) => {
            return value + " " + Product.image_url
        },
        text: 'Price',
    }

Fujimoto

Answer 4

most of programming languages concatenation is done by "+" operator, now u need to write something like this in your table column <td> firstname+""+lastname</td> inside your respective table row, might help you

Rodney

That was the first thing I tried, both in an array format [], object format {}, and string "fname" + "lname", but none worked. – Dogy

is it giving any error or what? it has to give a desired results, there is no other way around, bootstrap is just a front end , it has nothing to do with your database,you need to give correct values, may be you concatenating incorrectly – Rodney

which middleware you are using bdw? – Rodney

No error, it just doesn't do anything. I am using link for the table and using Ruby/Sinatra with Mongoid. I have tried adding a new <th> with data-field="fname" + "lname" and all I will get returned is the fname value. So I tried to place the concatenation in square brackets, curly braces, and parentheses but none worked. – Dogy

this is how you concatenate strings in ruby/sintara gist.github.com/migane/3425304 – Rodney

Answer 5

you need a function to format the column bootstrap-table#column-options:

index.html

<table id="my-table"></table>

controller.js

//jQuery is used to manipulate the table

$.ajax({
    url: 'https://jsonplaceholder.typicode.com/users',
    type: 'GET'
}).done((data) => {
        $('#my-table').bootstrapTable({
            data: data,
            search: true,
            pagination: true,
            columns: [{
                field: 'id',
                title: 'ID'
            }, {
                field: 'name',
                title: 'NAME'
            }, {
                field: 'address.street',
                title: 'ADDRESS',
                formatter: (value, row, index, field) => {
                    return value + ' - ' + row.address.suite + ' - ' + row.address.city
                }
            }]
        });
    })
    .fail((jqXHR, textStatus, errorThrown) => {
        console.log(jqXHR)
    });

Calaboose