Bootstrap-Table：使用Ajax调用并添加link输出table

Question

我正在使用 bootstrap table 通过 ajax 调用插入数据。但是，我无法在 table.

中格式化此数据

在下面找到我的最小可行示例：

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

我想要 table 如下：

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

尽你所能，我想在第一列中插入一个 link。

关于如何在 bootstrap-table 中实现这个的任何建议？

感谢您的回复！

Answer 1

首先在ajaxRequest函数中格式化响应数据，使title字段包含标题（displaText）和url（link）。然后使用函数格式化数据并为 a 标记生成 html。使用 bootstrap data-formatter.

将此格式化程序函数与 html 连接

这是工作示例。

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

Bootstrap-Table：使用Ajax调用并添加link输出table

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

javascript

jquery

bootstrap-table