Bootstrap-Table: Using Ajax call and add link to output table

52
June 08, 2021, at 06:00 AM

I am using bootstrap table to insert data via an ajax call. However, I cannot format this data in the table.

Find below my minimum viable example:

// your custom ajax request here
function ajaxRequest(params) {
  var url = 'https://jsonplaceholder.typicode.com/albums/1/photos'
  $.get(url + '?' + $.param(params.data)).then(function(res) {
    params.success(res)
  })
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css" rel="stylesheet" />
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
<table id="table_2" data-toggle="table" data-height="1200" data-page-size="50" data-ajax="ajaxRequest" data-pagination="true" class="table table-striped table-hover">
  <thead>
    <tr>
      <th data-field="title" scope="col">Title</th>
      <th data-field="url" scope="col">URL</th>
      <th data-field="thumbnailUrl" scope="col">ThumbnailUrl</th>
    </tr>
  </thead>
</table>

I would like to have the table as following:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css" rel="stylesheet" />
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
<table id="table_2" data-toggle="table" data-height="1200" data-page-size="50" data-pagination="true" class="table table-striped table-hover">
  <thead>
    <tr>
      <th data-field="title" scope="col">Title</th>
      <th data-field="url" scope="col">URL</th>
      <th data-field="thumbnailUrl" scope="col">ThumbnailUrl</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <a href="https://via.placeholder.com/150/92c952" target="_blank">accusamus beatae ad facilis cum similique qui sunt</a>
      </td>
      <td>https://via.placeholder.com/600/92c952</td>
      <td>https://via.placeholder.com/150/92c952</td>
    </tr>
    <tr>
      <td>
        <a href="https://via.placeholder.com/150/92c952" target="_blank">accusamus beatae ad facilis cum similique qui sunt</a>
      </td>
      <td>https://via.placeholder.com/600/92c952</td>
      <td>https://via.placeholder.com/150/92c952</td>
    </tr>
    <tr>
      <td>
        <a href="https://via.placeholder.com/150/92c952" target="_blank">accusamus beatae ad facilis cum similique qui sunt</a>
      </td>
      <td>https://via.placeholder.com/600/92c952</td>
      <td>https://via.placeholder.com/150/92c952</td>
    </tr>
</table>

As you can I would like to insert in the first column a link.

Any suggestions how to implement this in bootstrap-table?

I appreciate your replies!

Answer 1

At first format the response data in the ajaxRequest function, so that title field contain both the title (displaText) and the url (link). Then use a function to format data and generate html for a tag. Connect this formatter function with html by using bootstrap data-formatter.

Here is the working example.

// your custom ajax request here
function ajaxRequest(params) {
  var url = 'https://jsonplaceholder.typicode.com/albums/1/photos'
  $.get(url + '?' + $.param(params.data)).then(function(res) {
    
    // format the response here
    const formattedRes = res.map(o => {
      return {
        ...o,
        title: {
          displayText: o.title,
          link: o.url
        }
      }
    });
    params.success(formattedRes);
  })
}
// custom function for formatting link
function linkFormatter(value, row, index) {
  return `<a href="${value.link}" target="_blank">${value.displayText}</a>`;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css" rel="stylesheet" />
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
<table id="table_2" data-toggle="table" data-height="1200" data-page-size="50" data-ajax="ajaxRequest" data-pagination="true" class="table table-striped table-hover">
  <thead>
    <tr>
      <th data-field="title" data-formatter="linkFormatter" scope="col">Title</th>
      <th data-field="url" scope="col">URL</th>
      <th data-field="thumbnailUrl" scope="col">ThumbnailUrl</th>
    </tr>
  </thead>
</table>

READ ALSO
JupiterLab matplotlib line diagram is not mapped

JupiterLab matplotlib line diagram is not mapped

im trying to plot with matplotlib inJupiterLab a line graph:

57
Replace Build from docker-compose.yml with the built image once config is final?

Replace Build from docker-compose.yml with the built image once config is final?

I have a bunch of docker images and containers that I've been building with ayml file and Docker Files

42
How to solve race condition in Javascript? [closed]

How to solve race condition in Javascript? [closed]

Want to improve this question? Update the question so it focuses on one problem only by editing this post

45