How to add static glyphicons to a Bootstrap table

Question

There is my table skeleton:

<thead>
    <tr>
        <th data-field="userId">User Id</th>
        <th data-field="name">Name</th>
        <th data-field="surname">Surname</th>
        <th data-field="rate">Rate Per Hour</th>
        <th data-field="accName">Account Name</th>
        <th data-field="fixCosts">Fix Costs</th>
        <th id="tableOption">
            Action
        </th>
    </tr>
</thead>

I am filling the tables with data returned from JSON

$.getJSON('/ManageUsers/GetActiveUsers/', function (data) {
            $('#usersTable').bootstrapTable({
                data: data
            });

The last column is called Action. I am not giving data to this column. I would like to have two glyphicons there for every row. How can I do that ?

--EDIT--

public JsonResult GetActiveUsers()
{
    List<UserOnTheList> users = _userService.GetActiveUsers();
    var rows = users.Select(s => new
    {
        userId = s.UserId,
        name = s.Name,
        surname = s.Surname,
        rate = s.RatePerHour,
        accName = s.AccountName,
        fixCosts = s.FixCost
    })
    .ToArray();

    return Json(rows, JsonRequestBehavior.AllowGet);
}

All I want is that every row will have two glyphicons at the tableOption column

Your table will only have header columns? What is the format of the data being returned? You can add glyphicons by adding 2 spans inside the column. Each span will be a glyphicon. Example: ``. To display a glyphicon you add the class glyphicon then the class representing the glyphicon you want to display. With jQuery you can change the inner html for an element. For example: `$("#tableOption").html("")` — Jeremy Ray Brown, Feb 03 '16 at 15:37
i am returing json data, anyway i know how to display golyphicon the point is I dont know how much data will json recive. Every data-field is being updated and I want automatic tableOption being updated just with 2 golyphicons — miechooy, Feb 03 '16 at 15:41
You can add glyphicons by adding 2 spans inside the column. Each span will be a glyphicon. To display a glyphicon you add the class glyphicon then the class representing the glyphicon you want to display. With jQuery you can change the inner html for an element. For example: `$("#tableOption").html("")`. Article to add rows to table: http://stackoverflow.com/questions/171027/add-table-row-in-jquery — Jeremy Ray Brown, Feb 03 '16 at 15:42
To loop through a list of JSON objects with jQuery: http://stackoverflow.com/questions/800593/loop-through-json-object-list. — Jeremy Ray Brown, Feb 03 '16 at 15:43
Provide more details on the JSON and someone can write a proper answer for you. — Jeremy Ray Brown, Feb 03 '16 at 15:44
@miechooy one issue I see is that you'll have duplicate #tableOption ids. I would suggest making that a class instead. — jrummell, Feb 03 '16 at 16:47
@jrummell I agree with posting to answer rather then comment. Just wanted the poster to add more detail and it looks like that has happened. — Jeremy Ray Brown, Feb 03 '16 at 18:54
@miechooy, I see, you're using the http://bootstrap-table.wenzhixin.net.cn/ library. Have you tried putting the glyphicon HTML into the response. Just make that another property for the object. — Jeremy Ray Brown, Feb 03 '16 at 19:19

Jeremy Ray Brown · Accepted Answer · 2016-02-03T19:52:49.553

You can add the glyphicon in the response. Change <th id="tableOption">Action</th> to <th data-field="glyphicons"></th>.

Make glyphicons a property for UserOnTheList. Populate that property with the correct spans (e.g. <span class="glyphicon glyphicon-plus"></span>). It should work as expected.

You can try this at http://jsfiddle.net/wenyi/e3nk137y/13/?utm_source=website&utm_medium=embed&utm_campaign=e3nk137y

That is the tester for the library you're using. Just add the glyphicon spans to a description property for one of the objects in the list. Click run and you'll see the glyphicon show up.

If you don't like adding view html to the object, then edit the list of objects in data before calling bootstrapTable.

How to add static glyphicons to a Bootstrap table

1 Answers1