7

I want to add a link to a column in bootstrap-table. How to do this?

JasonMArcher
  • 14,195
  • 22
  • 56
  • 52
Chan
  • 2,601
  • 6
  • 28
  • 45
  • 1
    These may be of interest too, as they both answer this as well as show wider use cases, such as on cell or row click: https://github.com/wenzhixin/bootstrap-table/issues/1380, https://github.com/wenzhixin/bootstrap-table/issues/877 – Daniel Brose Nov 13 '15 at 05:50

3 Answers3

12

In your HTML table:

<th data-field="snum" data-formatter="LinkFormatter">Computer</th>

in your javascript:

function LinkFormatter(value, row, index) {
  return "<a href='"+row.url+"'>"+value+"</a>";
}
William Weatherby
  • 186
  • 1
  • 3
4

I found the mechanism for this using the 'formatter'object. Below is an example formatter.

function identifierFormatter(value, row, index) {
    return [
            '<a class="like" href="javascript:void(0)" title="Like">',
                value,
            '</a>'].join('');
}

Basically to use this, it has to be added as an HTML data attribute to the Table Header.

<th data-field="identifier" data-align="right" data-sortable="true"  data-formatter="identifierFormatter">Identifier</th>
Chan
  • 2,601
  • 6
  • 28
  • 45
0

html

<table id="table_exemple" data-toggle="table" data-pagination="true" >
    <thead>
        <tr>
            <th data-field="id">Id</th>
            <th data-field="name">Nome</th>
            <th data-field="action" data-formatter="ActionFormatter">Details</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

javascript

var bootstrap_table = $('#table_exemple');

function AddRow(obj){
    bootstrap_table.bootstrapTable('insertRow', {
        index: 0,
        row: {
           id: obj.id,
           name: obj.name,
           action: obj.id
        }
    });
}

function ActionFormatter(value) {
    return '<a href="javascript:void(0)" onclick="Details('+ value +')">Details</a>';
}

function Details(id){
    ...
}
FelipeFalanque
  • 63
  • 6