Использование DataTable с json

Question

Я пытаюсь создать сайт, который может отображать некоторые данные из базы данных mysql, используя jquery, и я не могу понять, как заполнить таблицу данными. мой PHP-файл выглядит следующим образом:

<?php 
$servername = "localhost"; 
$database = "testdatabase"; 
$username = "root"; 
$password = ""; 

// Create connection 
$conn = new mysqli($servername, $username, $password, $database); 
// Check connection 

if ($conn->connect_error) 
{ 
    die("Connection failed: " . $conn->connect_error); 
} 
$getinfo = "SELECT * FROM greenhouse"; 
$names = $conn->query($getinfo); 
$str = array(); 
if ($names->num_rows > 0) { 
    // output data of each row 
    while($res = $names->fetch_array(MYSQL_ASSOC)) { 
     $str[] = $res; 
    } 
} 

echo json_encode($str); 
?> 

И это мой сценарий:

<script> 


function get_greenhouses(){ 
    if (window.XMLHttpRequest) { 
     // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp = new XMLHttpRequest(); 
    } else { 
     // code for IE6, IE5 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      //var returnval = JSON.parse(xmlhttp.responseText); 
      //document.getElementById("main_text").innerHTML = dataSet[0]; 
      start_table(JSON.parse(xmlhttp.responseText)); 
      //document.getElementById("main_text").innerHTML = returnval[0].Name; 
     } 
    } 
    xmlhttp.open("GET","get_greenhouses.php", true); 
    xmlhttp.send(); 
    } 

    function start_table(greenhousedata){ 
    console.log(greenhousedata); 
    //document.getElementById("main_text").innerHTML = greenhousedata[0].Adress; 
     $('#example1').DataTable({ 
     "ajax": greenhousedata, 
     columns: [ 
      { title: "Name" }, 
      { title: "ID" }, 
      { title: "plant type" }, 
      { title: "install date" }, 
      { title: "adress" } 
     ] 
    }); 
    } 
$(function() { 
    get_greenhouses(); 
    }); 
</script> 

Так что я пытаюсь иметь функцию get_greenhouses(), который запускается при загрузке документа. В нем я делаю запрос к файлу PHP, который получает данные, кодирует его в json и отправляет обратно. Когда я получу данные, я хочу передать их функции start_table(), а затем использовать ее для заполнения таблицы. Прямо сейчас я получаю сообщение об ошибке: Предупреждение DataTables: таблица id = пример1 - Недействительный ответ JSON. Для получения дополнительной информации об этой ошибке, пожалуйста, см. http://datatables.net/tn/1 , но когда я перейду по ссылке и проверьте, какие данные я получаю из файла php, она говорит json и выглядит корректно, насколько я могу судить.

Может кто-нибудь сказать мне, что я делаю неправильно, или если есть способ сделать это?

Answer 1

Используйте нижеприведенный код.

Просто введите правильные названия полей вашей таблицы greenhouse вместо фиктивных, указанных опцией data.

function get_greenhouses(){ 
    $('#example1').DataTable({ 
     ajax: { 
     url: "get_greenhouses.php", 
     dataSrc: "" 
     }, 
     columns: [ 
      { data: "name",  title: "Name" }, 
      { data: "id",   title: "ID" }, 
      { data: "plant",  title: "Plant type" }, 
      { data: "dt_install", title: "Install date" }, 
      { data: "address", title: "Address" } 
     ] 
    }); 
} 

Answer 2

ajax вариант для прохождения URL, так что плагин делает запрос AJAX. В вашем случае вы сами делаете этот запрос и передаете данные непосредственно в плагин.

Вы можете продолжить свой подход, передав данные в свойства плагина data. См example

$('#example1').DataTable({ 
     "data": greenhousedata, 

Или пусть плагин сделать сам запрос вместо

Answer 3

Я пытался charlietfls решения первым и получил другую ошибку, но через 15 мин прибегая к помощи и пытаюсь я узнал, я мастерил сказать, что столбец должен использовать какая часть данных, поэтому вместо того, чтобы просто иметь {title: "Name"}, мне пришлось использовать {title: "Name", "data": "Name"}, и после этого она работала как шарм.

После этого я прочитал ответ Gyrocode.com и попробовал это также, и он также работал как шарм, если я изменил данные: поля в соответствии с моими входящими данными. так как это решение позволило мне отказаться от функции get_greenhouses, я выбрал ее.

Спасибо всем за помощь :)