Почему параметры данных не работают после включения импорта и сценариев - PullRequest
Новая
       13

Почему параметры данных не работают после включения импорта и сценариев

0 голосов
/ 26 апреля 2020

Я хочу включить datatable и jquery в мой html. Я следую примеру на https://datatables.net/examples/basic_init/zero_configuration.html. Ожидаемый результат:

enter image description here

Я не могу заставить работать какие-либо опции. Мой порядок импорта правильный? Версии библиотек самые последние, я верю. Просто начнем с веб-разработки, поэтому, пожалуйста, помилуйте.

У меня есть импорт, как и должно быть: 

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Core Reporting</title>

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.20/datatables.css"/>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
  <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
  <link href="{{ url_for('static', filename='css/mdb.min.css') }}" rel="stylesheet">
  <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
</head>

Тогда в теле у меня есть заполнитель div для таблицы: 

<div class="container-fluid" id="main-container" style="margin-top: 120px; max-width: 1800px; background-color: white;">
    {% block maincard %}{% endblock %}
</div>

и импорт скрипта перед закрытием тела: 

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.20/datatables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/popper.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/mdb.min.js') }}"></script>
<script>
    $(document).ready(function() {
        $('#hypervisorTable').DataTable({
          scrollY: 300,
          paging: true
        });
    });
</script>

Образцы таблиц. html шаблон, простирающийся над домом: 

{% extends 'home.html' %}

{% block maincard %}
<table id="hypervisorTable" class="display" width="100%">
    <thead>
        {% for col in data.columns %}
            <th class="th-sm"> {{ col }} </th>
        {% endfor %}
    </thead>
    <tbody>
        {% for row in data.index %}
        <tr>
            <td>{{ data.loc[row, 'Instance type'] }}</td>
            <td>{{ data.loc[row, 'Hypervisor'] }}</td>
            <td>{{ data.loc[row, 'vCPUs'] }}</td>
            <td>{{ data.loc[row, 'Cores'] }}</td>
            <td>{{ data.loc[row, 'Threads per core'] }}</td>
            <td>{{ data.loc[row, 'Memory (MiB)'] }}</td>
            <td>{{ data.loc[row, 'Storage (GB)'] }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endblock %}

1 Ответ

0 голосов
/ 26 апреля 2020

В заголовке таблицы было только несколько столбцов из объекта данных. Для DataTable требуются правильно отформатированные столбцы с точным соответствием, строки для правильного отображения.

Перебор всех столбцов и всех значений устранил проблему: 

<table id="hypervisorTable" class="display" width="100%">
    <thead>
        {% for col in data.columns %}
        <th class="th-sm"> {{ col }} </th>
        {% endfor %}
    </thead>
    <tbody>
        {% for row in data.index %}
        <tr>
            {% for col in data.columns %}
            <td>{{ data.loc[row, col] }}</td>
            {% endfor %}
        </tr>
        {% endfor %}
    </tbody>
</table>
...