Question

我正试图在其他PHP页面中第二次使用DataTables，但我存在此错误，

DataTables警告：非表节点初始化（TBODY）。

我做错了什么？我用我的第一个PHP页面尝试了这个代码并且工作正常。

这是我的表格代码

<table class="table table-striped table-hover ">
          <div class="row">
              <div class="col-lg-12">
                  <div class="page-header">
                      <h1 id="tables">Admin's Accounts</h1>
                  </div>
                      <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#modal"><i class="zmdi zmdi-plus-circle zmdi-hc-2x"></i></button>
                      <table class="table table-striped table-hover ">
                          <thead>
                              <tr>
                                  <th>#</th>
                                  <th>Name</th>
                                  <th>Contact</th>
                                  <th>Email Address</th>
                                  <th>Position</th>
                                  <th>Option</th>
                              </tr>
                          </thead>
                          <tbody id="admin">
                                  <?php
                            //set up mysql connection
                            mysql_connect("localhost", "root", "") or die(mysql_error());
                            //select database
                            mysql_select_db("brm_dbs") or die(mysql_error());
                                    //select all records form tblmember table
                                    $query = 'SELECT uid,name,contact,email,position FROM admin ORDER BY created_at DESC';
                                    //execute the query using mysql_query
                                    $result = mysql_query($query);
                                   //then using while loop, it will display all the records inside the table
                                    while ($row = mysql_fetch_array($result)) {
                                        echo ' <tr> ';
                                        echo ' <td> ';
                                        echo $row['uid'];
                                        echo ' <td> ';
                                        echo $row['name'];
                                        echo ' <td> ';
                                        echo $row['contact'];
                                        echo ' <td> ';
                                        echo $row['email'];
                                        echo ' <td> ';
                                        echo $row['position'];
                                        echo '<td>';
                                        echo '<button type="button" class="btn btn-link" data-toggle="modal" data-target="#myModal'.$row['uid'].'"><i class="zmdi zmdi-plus-circle zmdi-hc-2x"></i></button>';
                                    }
                              ?>
                          </tbody>
                  </table> 
              </div>
          </div>
          </table>

我正在将此用于JQUERY

<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"></script>
    <script>
         $(document).ready(function() {
             $('#admin').DataTable( {
                 "lengthMenu": [[5, 10, 25, -1], [5, 10, 25, "All"]]
             });
         } );
    </script>

Answer 1

我得到了错误：非表节点初始化是因为DOM中的另一个元素具有相同的“ ID”

import React from "react";
import { data } from "./sounds";

export default function Key(props) {
  const soundId = props.soundId;

  const play = () => {
    document.getElementById(props.id).play();
    console.log(`'Clicked:' ${props.id}`);
  };

  const displayData = props.displayData;

  const handleClick = () => {
    play();
    displayData(props.id);
  };

  return (
    <div className="buttonContainer" >
      <button id="button" className="drum-pad" onClick={handleClick} onKeyDown={handleClick}>
        <audio
          src={data[soundId].url}
          type="audio/mp3"
          className="clip"
          id={props.id}
        />
        {props.id.toUpperCase()}
      </button>
    </div>
  );
}

在导航菜单中具有相同的ID

import React, { useState } from "react";
import Key from "./Key";

import "./styles.css";

export default function App() {
  const [displayData, setDisplayData] = useState();

  const handleDisplay = input => {
    setDisplayData(input);
    setTimeout(() => {
      setDisplayData();
    }, 500);
  };

  return (
    <div className="App">
      <div id="drum-machine">
        <p id="display">{displayData}</p>
        <Key id={"Q"} soundId={0} charCode={81} displayData={handleDisplay} />
        <Key id={"W"} soundId={1} charCode={87} displayData={handleDisplay} />
        <Key id={"E"} soundId={2} charCode={69} displayData={handleDisplay} />
        <Key id={"A"} soundId={3} charCode={65} displayData={handleDisplay} />
        <Key id={"S"} soundId={4} charCode={83} displayData={handleDisplay} />
        <Key id={"D"} soundId={5} charCode={68} displayData={handleDisplay} />
        <Key id={"Z"} soundId={6} charCode={90} displayData={handleDisplay} />
        <Key id={"X"} soundId={7} charCode={88} displayData={handleDisplay} />
        <Key id={"C"} soundId={8} charCode={87} displayData={handleDisplay} />
      </div>
    </div>
  );
}

由于相同的ID重复，我得到了错误信息... :) 祝编码愉快！

Answer 2

在docs中，在任何一种情况下都会发生错误。

以这个div和表格为例

<div id="demo" class="display">
    <table class="display">...</table>
</div>

如果您尝试在#demo上初始化DataTables

$('#demo').dataTable()

由于#demo不是表格元素，因此会出现错误。

如果您尝试在.display上初始化

$('.display').dataTable();

由于.display太含糊，您会收到错误消息，这意味着该类有多个元素，并且DataTables需要一个唯一元素。

结论：

确保在正确的节点元素上初始化DT
确保DT元素的类/ ID是唯一的。

Answer 3

我编辑了我的代码表，我有语法错误 6TH 但是 7TD 并且只删除了echo中的最后一个TD现在工作正常。

DataTables警告：非表节点初始化（TBODY）。 PHP

3 个答案: