Fatal编程技术网
  • javascript/
  • Javascript DataTables jquery插件不工作，是否获取空白页？

Javascript DataTables jquery插件不工作，是否获取空白页？

javascript jquery html css

Javascript DataTables jquery插件不工作，是否获取空白页？,javascript,jquery,html,css,datatable,Javascript,Jquery,Html,Css,Datatable,我正试图用我的html表实现Datatables jquery插件，但运气不好。我正在链接到Datatables CDN，用于CSS样式和Datatables脚本本身，同时链接到Google托管的jquery插件。我还有一个本地Javascript文件，其中包含初始化表上数据表的脚本。我打开html页面，只得到我的普通表，就好像DataTable根本不起作用一样。我可能做错了什么 <link rel="stylesheet" type="text/css" href="http://cdn

我正试图用我的html表实现Datatables jquery插件，但运气不好。我正在链接到Datatables CDN，用于CSS样式和Datatables脚本本身，同时链接到Google托管的jquery插件。我还有一个本地Javascript文件，其中包含初始化表上数据表的脚本。我打开html页面，只得到我的普通表，就好像DataTable根本不起作用一样。我可能做错了什么

<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="datatables.js"></script>

<table id="mytable">
<table>
  <thead>
    <tr>
      <th>High-Level Category</th>
      <th>Device Type</th>
      <th>Hostname</th>
      <th>IP Address</th>
      <th>Owner</th>
      <th>Organizational Unit</th>
      <th>Organizational Unit Email</th>
      <th>Universal Forwarder or Syslog?</th>
      <th>In PCI?</th>
      <th>Notes</th>
    </tr>
  </thead>
<tbody contenteditable>
    <tr>
      <td contenteditable="true">SECDEV1</td>
      <td contenteditable="true">Firewall</td>
      <td contenteditable="true">Description 1</td>
      <td contenteditable="true">1.1.1.1</td>
      <td contenteditable="true">Kim</td>
      <td contenteditable="true">Information Technology</td>
      <td contenteditable="true">test@test.com</td>
      <td contenteditable="true">Syslog</td>
      <td contenteditable="true">Yes</td>
      <td contenteditable="true">notes</td>
    </tr>
    <tr>
      <td contenteditable="true">SECDEV2</td>
      <td contenteditable="true">Switch</td>
      <td contenteditable="true">description2</td>
      <td contenteditable="true">2.2.2.2</td>
      <td contenteditable="true">Bob</td>
      <td contenteditable="true">Information Networking</td>
      <td contenteditable="true">test2@test.com</td>
      <td contenteditable="true">Syslog</td>
      <td contenteditable="true">NO</td>
      <td contenteditable="true">more notes</td>
    </tr>
</tbody>
任何帮助都会很好

谢谢

您的html代码不正确。有一个额外的开放式结尾表格标签。我在下面更正了您的html：

<table id="mytable">
      <thead>
        <tr>
          <th>High-Level Category</th>
          <th>Device Type</th>
          <th>Hostname</th>
          <th>IP Address</th>
          <th>Owner</th>
          <th>Organizational Unit</th>
          <th>Organizational Unit Email</th>
          <th>Universal Forwarder or Syslog?</th>
          <th>In PCI?</th>
          <th>Notes</th>
        </tr>
      </thead>
        <tbody contenteditable>
            <tr>
              <td contenteditable="true">SECDEV1</td>
              <td contenteditable="true">Firewall</td>
              <td contenteditable="true">Description 1</td>
              <td contenteditable="true">1.1.1.1</td>
              <td contenteditable="true">Kim</td>
              <td contenteditable="true">Information Technology</td>
              <td contenteditable="true">test@test.com</td>
              <td contenteditable="true">Syslog</td>
              <td contenteditable="true">Yes</td>
              <td contenteditable="true">notes</td>
            </tr>
            <tr>
              <td contenteditable="true">SECDEV2</td>
              <td contenteditable="true">Switch</td>
              <td contenteditable="true">description2</td>
              <td contenteditable="true">2.2.2.2</td>
              <td contenteditable="true">Bob</td>
              <td contenteditable="true">Information Networking</td>
              <td contenteditable="true">test2@test.com</td>
              <td contenteditable="true">Syslog</td>
              <td contenteditable="true">NO</td>
              <td contenteditable="true">more notes</td>
            </tr>
        </tbody>
    </table>


高级别类别
设备类型
主机名
IP地址
所有者
组织单位
组织单位电子邮件
通用转发器还是系统日志？
在PCI中？
笔记
秘书1
防火墙
说明1
1.1.1.1
基姆
信息技术
test@test.com
系统日志
对
笔记
秘书2
转换
说明2
2.2.2.2
上下快速移动
信息网络
test2@test.com
系统日志
不
更多注释
您的html代码不正确。有一个额外的开放式结尾表格标签。我在下面更正了您的html：

<table id="mytable">
      <thead>
        <tr>
          <th>High-Level Category</th>
          <th>Device Type</th>
          <th>Hostname</th>
          <th>IP Address</th>
          <th>Owner</th>
          <th>Organizational Unit</th>
          <th>Organizational Unit Email</th>
          <th>Universal Forwarder or Syslog?</th>
          <th>In PCI?</th>
          <th>Notes</th>
        </tr>
      </thead>
        <tbody contenteditable>
            <tr>
              <td contenteditable="true">SECDEV1</td>
              <td contenteditable="true">Firewall</td>
              <td contenteditable="true">Description 1</td>
              <td contenteditable="true">1.1.1.1</td>
              <td contenteditable="true">Kim</td>
              <td contenteditable="true">Information Technology</td>
              <td contenteditable="true">test@test.com</td>
              <td contenteditable="true">Syslog</td>
              <td contenteditable="true">Yes</td>
              <td contenteditable="true">notes</td>
            </tr>
            <tr>
              <td contenteditable="true">SECDEV2</td>
              <td contenteditable="true">Switch</td>
              <td contenteditable="true">description2</td>
              <td contenteditable="true">2.2.2.2</td>
              <td contenteditable="true">Bob</td>
              <td contenteditable="true">Information Networking</td>
              <td contenteditable="true">test2@test.com</td>
              <td contenteditable="true">Syslog</td>
              <td contenteditable="true">NO</td>
              <td contenteditable="true">more notes</td>
            </tr>
        </tbody>
    </table>


高级别类别
设备类型
主机名
IP地址
所有者
组织单位
组织单位电子邮件
通用转发器还是系统日志？
在PCI中？
笔记
秘书1
防火墙
说明1
1.1.1.1
基姆
信息技术
test@test.com
系统日志
对
笔记
秘书2
转换
说明2
2.2.2.2
上下快速移动
信息网络
test2@test.com
系统日志
不
更多注释
要达到预期效果，请使用以下CDN库

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
Codepen-

要达到预期效果，请使用下面的CDN库

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
Codepen-

为什么同时使用datatables.js和datatable min.js。删除datatables.js。datatables.js是初始化datatables的本地javascript脚本。这就是datatables CDN中的datatables.min.js所做的吗？两者都是相同的，但min.js是一个小型版本。只需删除它并检查它。我继续删除了datable.min.js。仍然会出现相同的问题。not min.js删除最后一个datatables.js为什么datatables.js和datatable min.js都要删除。删除datatables.js。datatables.js是初始化datatables的本地javascript脚本。这就是datatables CDN中的datatables.min.js所做的吗？两者都是相同的，但min.js是一个小型版本。只需删除它并检查它。我继续删除了datable.min.js。仍然出现同样的问题。not min.js删除最后一个datatables。js@zach，如果我的回答对你的问题有帮助，请将其标记为已回答：）@zach，如果我的回答对你的问题有帮助，请将其标记为已回答：）