Search code examples
javascripthtmltwitter-bootstrapbootstrap-table

Bootstrap table data-formatter for hyperlink formating functions not working

I have been trying to format the values of a column in BoostrapTable with this code:

HTML:

<table data-toggle="#table" id="articles-table">
    <thead class="thead-light">
        <tr>
            <th data-field="url" data-formatter="LinkFormatter" data-sortable="true">
                Title
            </th>
            <th data-field="date" data-sortable="true">
                Date
            </th>
        </tr>
    </thead>
</table>

JS:

const LinkFormatter = (e, t) => '<a href="'+e.url+'" target="_blank">' + e.title + "</a>";
$(function() {
    $('#articles-table').bootstrapTable({
        data: mydata
    })
})

Mydata:

mydata = [
    {
        date: "2020-08-04",
        title: "Title one",
        url: "https://www.site1.org"
    }, {
        date: "2020-08-05",
        title: "Title two",
        url: "https://www.site2.org"

    }, {
        date: "2020-08-06",
        title: "Title three",
        url: "https://www.site3.org"
    }
]

What I want is each title row have an hyperlink. What I am having instead is: enter image description here

Could someone tell me what I am doing wrong ? Thanks!

Solution

  • Looks like the bootstrap-table script isn't picking up the function declared as a constant const LinkFormatter. So what I did was I transformed it into a function declaration like what they did in the docs.

    Also, if you look at the screenshot below, you do not need to access the url attribute of e because e already contains the url and t is an object which contains the title.

    enter image description here

    So in short, you just needed to familiarize yourself with debugging. For that, I recommend simply logging your objects in the console to see what value they have on a specific scenario.

    function LinkFormatter(e, t) {
  return '<a href="' + e + '" target="_blank">' + t.title + "</a>"
};

let mydata = [{
  date: "2020-08-04",
  title: "Title one",
  url: "https://www.site1.org"
}, {
  date: "2020-08-05",
  title: "Title two",
  url: "https://www.site2.org"

}, {
  date: "2020-08-06",
  title: "Title three",
  url: "https://www.site3.org"

}]

$(function() {
  $('#articles-table').bootstrapTable({
    data: mydata
  })
})
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.17.1/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table@1.17.1/dist/bootstrap-table.min.js"></script>

<table data-toggle="#table" id="articles-table">
  <thead class="thead-light">
    <tr>
      <th data-field="url" data-formatter="LinkFormatter" data-sortable="true">
        Title
      </th>
      <th data-field="date" data-sortable="true">
        Date
      </th>
    </tr>
  </thead>
</table>