Получить данные в json, используя javascript и datatables

Question

У меня есть javascript, как показано ниже, который может извлекать данные из резервной копии в формате json. Но как я могу передать его в другую функцию, т.е. DataTables, чтобы заполнить его

<script> 
var returndata; 

$.getJSON("/api/dashboard_data/", success); 

function success(data) { 
    returndata = data; 
    window.alert(returndata); 
    return returndata; 
    // do something with data, which is an object 
} 

$(document).ready(function() { 
     $('#example').DataTable({ 
     data: returndata, 
     columns: [ 
      { title: "Action" }, 
      { title: "Input" }, 
      { title: "State" }, 
      { title: "Completed" }, 
      { title: "Project" }, 
     ] 
    }); 
}); 
</script> 

В коде выше в Window.alert (returndata), я получаю данные JSON, который был возвращен из ценных.

Но та же переменная «returndata», когда я использую ее в готовой функции, пуста. Как я могу получить его в готовой функции.

Answer 1

Здесь вы вызываете две асинхронные функции. $.getJSON() и $(document).ready(). Похоже, что ready() быстрее, чем getJSON(), что означает, что returndata пуст, когда вы пытаетесь заполнить таблицу данных.

Попробуйте убедиться, что вы всегда правильный порядок:

<script> 

$(document).ready(function() { 
     $.getJSON("/api/dashboard_data/", function(returndata) { 
      $('#example').DataTable({ 
       data: returndata, 
       columns: [ 
        { title: "Action" }, 
        { title: "Input" }, 
        { title: "State" }, 
        { title: "Completed" }, 
        { title: "Project" }, 
       ] 
      }); 
     }); 
}); 
</script> 

Answer 2

Во-первых, какой плагин jQuery вы используете для DataTables? Это one? Первое, что я хотел бы сделать, - это разместить все внутри $document.ready(), как показывает документация. Это гарантирует, что весь ваш код будет выполнен после того, как DOM будет готов. Позвольте мне знать, что происходит после этого.

Также this часть документации может помочь, если вы используете API DataTables. Это может быть столь же просто, как опечатка в зависимости от того, что вы пытаетесь сделать, как цитату из Документов здесь:

Результата от каждого является экземпляром объекта DataTables API, который имеет таблицы, найденные селектор в его контексте. Важно отметить разницу между $(selector).DataTable() и $(selector).dataTable(). Первый возвращает экземпляр API DataTables, а последний возвращает объект jQuery.

Answer 3

Я знаю, что это не является хорошим решением, просто хак. Вы можете использовать функцию window.setInterval или window.setTimeout для проверки данных и выполнения требуемой функции. Не забудьте очистить интервал.

Answer 4

Следуйте документации DataTables: https://datatables.net/examples/server_side/simple.html

Вы должны сделать что-то вроде этого:

$('#example').DataTable({ 
    "processing": true, 
    "serverSide": true, 
    "ajax": _getData(), 
    "columns": [ 
     {title: "Action"}, 
     {title: "Input"}, 
     {title: "State"}, 
     {title: "Completed"}, 
     {title: "Project"} 
    ] 
}); 

function _getData(data, callback) { 
    $.getJSON("/api/dashboard_data/", success); 
    function success(data) { 
    // you'll probably want to get recordsTotal & recordsFiltered from your server 
     callback({ 
      recordsTotal: 57, 
      recordsFiltered: 57, 
      data: data 
     }) 
    } 
} 

Я не проверял этот код, но это должно вести вас в правильном направлении :)