Добавить гиперссылки на l oop in html - PullRequest
0 голосов
/ 22 марта 2020

У меня есть flask веб-приложение, которое создает таблицу html из данных stati c json. У меня все данные правильно отображаются в таблице, и одна из моих колонок - это ссылки на другие сайты. У меня есть для l oop данные json, и я не смог выяснить, как добавить гиперссылку в таблицу для каждого элемента в столбце ссылок.

Вот мой код

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Tools</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css"/>
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
</head>
<body>
  {% extends "template.html" %}
  {% block content %}
<h1>My Heading</h1>
<table id="tool_table" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Link</th>
                <th>Language</th>
                <th>Maintained</th>
                <th>Stars</th>
                <th>Author</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
              <th>Name</th>
              <th>Description</th>
              <th>Link</th>
              <th>Language</th>
              <th>Maintained</th>
              <th>Stars</th>
              <th>Author</th>
            </tr>
        </tfoot>
    </table>
<script>
function setupData() {
    $(document).ready(function () {
        $('#tool_table').DataTable({
            "ajax": {
                "url": "/json",
                "dataType": "json",
                "dataSrc": "data",
                "contentType":"application/json"
            },
            "columns": [
                {"data": "name"},
                {"data": "description"},
                {"data": "link"},
                {"data": "language"},
                {"data": "maintained"},
                {"data": "stars"},
                {"data": "author"}
            ]
        });
    });
}
$( window ).on( "load", setupData );
</script>
{% endblock %}
</body>
</html>

1 Ответ

0 голосов
/ 22 марта 2020

Использовать датированный рендеринг столбца columnDefs после columns

columnDefs: [{ 
    render: function (data, type, row) {
        return `<a href="${data}">Link</a>`;
    },
    targets: 2 // target column 
}]
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...