Предупреждение DataTables: инициализация узла вне таблицы (DIV). Для получения дополнительной информации об этой ошибке см. http://datatables.net/tn/2

Question

Я создал форму для отображения данных таблицы, мне нужно спроектировать таблицу с помощью сортировки, поиска и разбивки на страницы, но ошибка показывает мне вот так DataTables warning: Non-table node initialisation (DIV). For more information about this error, please see http://datatables.net/tn/2, ниже моя кодировка:

head

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">   
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"></style>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Echo Table coding

<?php
session_start();
$qry = "select id, name, identify, created, pay_option, amount, receivedby from payment_details";
$_SESSION["query"] = $qry;
$result = $conn->query("select id, name, identify, created, pay_option, amount, receivedby from payment_details");
$rows = $result->fetchAll(PDO::FETCH_ASSOC);
echo "<div id='myTable'><div class='data-content'><span><b>REPORT SELECTION</b></span><div class='data-table'>";
echo "<table id='dataTable'><tr><th>Payer</th><th>Passport/IC No</th><th>Date Paid</th><th>Payment Type</th><th>Payment Amount</th><th>Received by</th><th>Payment Receipt</th></tr>";
foreach($rows as $row) {
echo "<tr id=".$row["id"]."><td>".$row["name"]."</td><td>".$row["identify"]."</td><td>".$row["created"]."</td><td>".$row["pay_option"]."</td><td>".$row["amount"]."</td><td>".$row["receivedby"]."</td><td><a href='?loc=invoice' onclick='sessionFunction(".$row["id"].")'>View</a></td></tr>";
                }
echo "</table>";
echo "</div></div><div class='table-msg'><span>Total Record : ";
echo $result->rowCount();
echo "</span><span style='margin-left: 70%;'>Max 500 pages</span></div></div>";
                ?>

Script Function

$(document).ready(function(){
$('#myTable').dataTable();
});

Мой вывод покажет мне вот так

Фактически Я хочу, чтобы выходная таблица была похожа на приведенный ниже пример, а красные стрелки на рисунке означают, что мне нужна функция:

I надеюсь, что кто-то из экспертов по кодированию поможет мне справиться с этим, эти проблемы уже заставили меня застрять за несколько дней. Спасибо.

Answer 1

В вашем HTML вы определили эти два тега:

<div id='myTable'>

и:

<table id='dataTable'>

Итак, идентификатор вашего табличного тега dataTable.

Однако, когда вы инициализируете DataTables ...

$(document).ready(function(){
  $('#myTable').dataTable();
});

... вы используете идентификатор myTable - это идентификатор тега <div>. Вам необходимо использовать идентификатор тега <table>.

Я предлагаю обменять идентификаторы в вашем HTML следующим образом:

<div id="dataTable">

и:

<table id="myTable">

(типично использовать двойные кавычки , а не одинарные кавычки.)

Но это объясняет сообщение об ошибке:

Предупреждение DataTables: инициализация узла вне таблицы

Вы пытаетесь используйте <div> для инициализации DataTables. Вы должны быть в состоянии обойти эту ошибку, сделав это изменение.

(Конечно, могут быть и другие проблемы, скрывающиеся за этой ошибкой.)

Также отмечу, что примеры (например, здесь ) относятся к функции DataTable() не dataTable(). Я бы рекомендовал точно следовать их синтаксису (и я предполагаю, что вы используете версию 1.10.20).