Search code examples
javascriptcssbootstrap-table

bootstrap-table: th - add on the left an icon

anyone has an idea how to add something to the left in the bootstrap-table header? Like on the picture below I want to add an icon (question mark or whatever) to be a clickable link.

enter image description here

jsFIDDLE

<table id="summaryTable">
    <thead>
        <tr>
            <th data-field="id" data-align="center" data-width="20px" >id</th>
            <th data-field="name" data-align="center" data-sortable="true">Name</th>
            <th data-field="type" data-align="center" data-sortable="true">type</th>
        </tr>
    </thead>
</table>
Solution

  • You can add an element to every th:

      $('#summaryTable thead th').each(function() {
    s = $('<span style="position: absolute; left: 4px; top: 8px; cursor: pointer;">?</span>')
    s.click(function(e) {
        e.stopPropagation();
        alert('Question mark clicked')
    });
    $(this).append(s)
  })

    Note the e.stopPropagation(); to make sure the clicks on the question mark will not cause also a click on the entire TH

    Here is a fork of your jsfiddle:
    https://jsfiddle.net/dekelb/e403uvuh/