У меня просто возникают проблемы с инициализацией DataTable с использованием Ajax и PHP. По словам инспектора, ошибка:
Uncaught TypeError: Cannot read property 'length' of undefined jquery.dataTables.js:2649 (anonymous function) jquery.dataTables.js:2649 oSettings.jqXHR.$.ajax.success jquery.dataTables.js:8749 c jquery.js:3048 p.fireWith jquery.js:3160 k jquery.js:8235 r jquery.js:8778 Я следовал инструкциям, как на веб-сайте, но, видимо, я делаю что-то неправильно. Это не часть php, я только что проверил ее и вернул json-файл.
Вот что у меня есть.
Заранее спасибо.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Chromo Insiders</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="DataTables/media/js/jquery.dataTables.js"></script> <script type="application/javascript" language="javascript" src="insiders.js"></script> <link rel="stylesheet" type="text/css" href="ci_style.css" /> <style type="text/css"> @import 'DataTables/media/css/demo_table_jui.css'; </style> </head> <body> <header> <h1>Chromo Insiders</h1> </header> <table id="datatables"> <thead> <tr> <th>email</th> <th>Last Name</th> <th>First Name</th> <th>Date Registered</th> </tr> </thead> <tbody> </tbody> </table> </body> </html>
Вот сценарий:
$(document).ready(function(e) { $('#datatables').dataTable( { "bProcessing": true, "sAjaxSource": 'process.php' } ); });
На всякий случай вам нужно взглянуть на php-код:
<?php try { $conn = require_once 'dbConnect.php'; $sql = "SELECT email, lastName, firstName, state, dateRegistered FROM Users"; $result = $conn->prepare($sql) or die ($sql); if(!$result->execute()) return false; if($result->rowCount() > 0) { $json = array(); while($row = $result->fetch()){ $json[] = array( 'email' => $row['email'], 'lastName' => $row['lastName'], 'firstName' => $row['firstName'], 'dateRegistered' => $row['dateRegistered'], 'state' => $row['state'] ); } $json['success'] = true; echo json_encode($json); } } catch(PDOException $e) { echo 'Error: ' . $e->getMessage(); } ?>
Вам нужно изменить свой ответ как таковой:
if($result->rowCount() > 0) { $json = array(); while($row = $result->fetch()){ /** MAKE ARRAY NON ASSOCIATIVE **/ $json[] = array( $row['email'], $row['lastName'], $row['firstName'], $row['dateRegistered'], $row['state'] ); } /*** MAKE RESPONSE HAVE 'aaData' ENTRY ****/ $response = array(); $response['success'] = true; $response['aaData'] = $json; echo json_encode($response);
Ссылка здесь: http://datatables.net/release-datatables/examples/data_sources/ajax.html . В частности:
DataTables ожидает объект с массивом с именем «aaData» с источником данных.
Также в таблице нет столбца «state», хотя ваш ответ ajax …