Mam aplikację internetową kolby, która tworzy tabelę HTML z statycznych danych JSON. Mam wszystkie dane wyświetlane poprawnie w tabeli, a jedną z moich kolumn jest linki do innych stron internetowych. Mam pętlę przechodzącą przez dane JSON i nie byłem w stanie dowiedzieć się, jak dodać hiperłącze w tabeli dla każdego elementu w kolumnie łącza.

Oto mój kod

<!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>
0
Q.Jig 22 marzec 2020, 08:44

1 odpowiedź

Najlepsza odpowiedź

Użyj datatable renderingu kolumny columnDefs po columns

columnDefs: [{ 
    render: function (data, type, row) {
        return `<a href="${data}">Link</a>`;
    },
    targets: 2 // target column 
}]
0
Sourav 22 marzec 2020, 06:08