Порядок выполнения скрипта Jquery DataTables - PullRequest
Новая
       3

Порядок выполнения скрипта Jquery DataTables

0 голосов
/ 13 ноября 2018

Я заполняю страницу html, загруженным из контроллера, вызывая 

$("#test").load("{% url 'simple_dataframe' %}");

'simple_dataframe' - это метод pandas.to_html (), который возвращает правильный html для jquery datatables.

Следующий скриптis: 

<script>
    $(document).ready(function () {
        $('#df_table').DataTable();
    });
</script>

, который загружается неправильно.Я скопировал возвращенный HTML на страницу и запустил его только с помощью DataTable jquery, и он работает нормально.Так что это не связано с искаженным HTML.Я думаю, что это как-то связано с порядком, в котором вызываются скрипты. 

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static '/css/bootstrap.min.css' %}" type="text/css"/>
    <link rel="stylesheet" href="{% static '/css/jquery.dataTables.css' %}" type="text/css"/>
    <script src="{% static "js/jquery-3.3.1.min.js" %}"></script>
    <script src="{% static 'js/jquery.dataTables.js' %}"></script>
</head>
<body>
<div id="test"></div>
<script>
    $(document).ready(function () {
        $("#test").load("{% url 'simple_dataframe' %}");
    });</script>

<script>
    $(document).ready(function () {
        $('#df_table').DataTable();
    });
</script>
</body>
</html>

1 Ответ

0 голосов
/ 13 ноября 2018

Проблема в том, что вызов load() является асинхронным, поэтому вы пытаетесь создать Datatable для HTML, который еще не существует. Чтобы это исправить, поместите вызов DataTable() в функцию обратного вызова load(), например: 

$(function () {
  $("#test").load("{% url 'simple_dataframe' %}", function() {
    $('#df_table').DataTable();
  });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...