Search code examples
javascriptjquerybootstrap-table

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

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!

Solution

  • 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>