javascript - 通过导入 xml 创建 HTML 表时的 DataTables-6ren

javascript - 通过导入 xml 创建 HTML 表时的 DataTables

转载作者：行者123 更新时间：2023-11-30 09:59:55

26

4

我有点迷茫，看不出我的代码有什么问题。这是我通过 jquery 加载 xml 文件的情况。然后我想在我的 html 表上使用 DataTables。不幸的是它不起作用(我的意思是表已创建但插件未激活)。我尝试了不同的方法，通过在我的代码中手动输入我的数据来创建一个 HTML 表，然后它就起作用了。由于 DataTables 提供的所有示例都包含已经创建的 HTML 表格，有人可以帮助我如何在通过 jquery 创建 HTML 表格时使 DataTables 工作:

我的 xml 数据叫做 rocol

<?xml version="1.0" encoding="UTF-8"?>
-<document>
-<row>
<Col0>1</Col0>
<Col1>2</Col1>
<Col2>3</Col2>
</row>
-<row>
<Col0>2</Col0>
<Col1>4</Col1>
<Col2>5</Col2>
</row>
</document>

我的代码:

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.11.3.js"></script>
<script src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css"/>
<script>

$(document).ready(function(){
 $.ajax({
  type: "GET",
  url: "rocol.xml",
  dataType: "xml",
  success: function(xml) {
   $(xml).find('row').each(function(){
    var Cl0 = $(this).find("Col0").text();
    var Cl1 = $(this).find("Col1").text();
    var Cl2 = $(this).find("Col2").text();
    $('<tr></tr>').html('<td>'+Cl0+'</td><td>'+Cl1+'</td><td>'+Cl2+'</td>').appendTo('#chart');
   });
  }
 });
});

 $(document).ready(function() {
    $('#chart').DataTable();
} );

</script>
</head>
<body>

<table id="chart" class="display" cellspacing="0" width="50%">
  <thead>
            <tr>
                <th>Order</th>
                <th>Dataheader</th>
                <th>Dataheader2</th>           
            </tr>
  </thead>
<tfoot>
            <tr>
                <th>Order</th>
                <th>Dataheader</th>
                <th>Dataheader2</th>           
            </tr>
</tfoot>
<tbody>
<tr></tr>
</tbody>
</table>

</body>
</html>

提前致谢

萨斯卡普

最佳答案

除了明显的异步性问题 - 数据表在 AJAX 完成之前初始化 - 以编程方式构建此类表格布局通常不是一个好主意，尤其是在处理数据表时。它难以维护且难以阅读，而且还会产生开销 ，因为 dataTables 将重新生成 <tbody>无论如何结构。如果您有很多记录，它可能会对性能产生不必要的负面影响。我建议您将 XML 解析为 valid data array并通过 array数据表为 data .示例:

function loadData(rocol) {
    var data = [];
    $(rocol).find('row').each(function(){
       data.push([
          $(this).find("Col0").text(),
          $(this).find("Col1").text(),
          $(this).find("Col2").text()
       ])
   }) 
   return data; 
}    

$("#chart").DataTable({
   data : loadData(rocol)
})

演示 -> http://jsfiddle.net/mond9ret/

通过 AJAX 加载时的最终代码是

$.ajax({
  url: "rocol.xml",
  success: function(xml) {
     $("#chart").DataTable({
        data: loadData(xml)
     })    
  }
})

这确保了

事情按正确的顺序发生
更易于维护
您让 dataTables 自己构建表。

关于javascript - 通过导入 xml 创建 HTML 表时的 DataTables，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32203077/

26

4

0

文章推荐： java - 如何从 JButton 内部调用 Swing 定时器

文章推荐： machine-learning - LSTM 预测的初始部分中的摆动

文章推荐： java - 无法解压缩在 Java 中使用 zlib 创建的 zip 文件

xml - 如何在没有源 xml 文件根节点的情况下将一个 xml 文件包含在另一个 xml 中？
正如标题中所问，我有两个如下结构的 XML 文件 A.xml //here I want to include B.xml
c# - 如何将等 xml 标签格式更改为
我有一个 xml 文件。根据我的要求，我需要更新空标签，例如我需要更改 to .是否可以像那样更改标签.. 谢谢... 最佳答案 var xmlString=" "; var properStri
xml - Golang : get inner xml from xml with xml.解码
我有这样简单的 XML: Song Playing 09:41:18 Frederic Delius Violin Son
xml - XML 阅读器是否应该忽略 XML 文件中的连续空格？
在我的工作中，我们有自己的 XML 类来构建 DOM，但我不确定应该如何处理连续的空格？例如 Hello World 当它被读入 DOM 时，文本节点应该包含 Hello 和 World
xml - 比较来自不同 XML 文件的元素值并附加到第一个 XML
我有以下 2 个 xml 文件，我必须通过比较 wd:Task_Name_ID 和 TaskID 的 XML 文件 2。例如，Main XML File-1 wd:Task_Name_ID 具有以下
xml - 使 XML 构建器从字符串中插入 XML
我在 Rails 应用程序中有一个 XML View ，需要从另一个文件插入 XML 以进行测试。我想说“构建器，只需盲目地填充这个字符串，因为它已经是 xml”，但我在文档中看不到这样做的任何内容
xml - XML 数据和 XML 元数据之间有什么区别？
我正在重建一些 XML 提要，因此我正在研究何时使用元素以及何时使用带有 XML 的属性。一些网站说“数据在元素中，元数据在属性中。” 那么，两者有什么区别呢？让我们以 W3Schools 为例:
xml - 文档中的多个 XML 声明是否为格式正确的 XML？
在同一个文档中有两个 XML 声明是否是格式正确的 XML？ hello 我相信不是，但是我找不到支持我的消息来源。来自 Extensible Markup Language
xml - 在 XML 中包装任意 XML
我需要在包装器 XML 文档中嵌入任意(语法上有效的)XML 文档。嵌入式文档被视为纯文本，在解析包装文档时不需要可解析。我知道“CDATA trick”，但如果内部 XML 文档本身包含 CDAT
xml - XML 解析器和 XML 处理器是否相同？
XML 解析器和 XML 处理器是两个不同的东西吗？他们是两个不同的工作吗？最佳答案 XML 解析器和 XML 处理器是一样的。它不适用于其他语言。 XML 是通用数据标记语言。解析 XML 文件已
xml - 在保留格式的同时从文件读取 XML 和从文件读取 XML
我使用这个 perl 代码从一个文件中读取 XML，然后写入另一个文件(我的完整脚本有添加属性的代码): #!usr/bin/perl -w use strict; use XML::DOM; use
xml - 使用 PowerShell 将 system.xml.xml 元素转换为 system.xml.xml 文档
我正在编写一个我了解有限的历史脚本。对象 A 的类型为 system.xml.xmlelement，我需要将其转换为类型 system.xml.xmldocument 以与对象 B 进行比较(类型
xml - 如何将子节点结构从一个 XML 文件复制到另一个 XML 文件(合并两个 XML 文件)？
我有以下两个 XML 文件: 文件1 101 102 103 501 502 503
xml - 如何将子节点结构从一个 XML 文件复制到另一个 XML 文件(合并两个 XML 文件)？
我有以下两个 XML 文件: 文件1 101 102 103 501 502 503
java - 转换性能 XML>XSL>XML 与 XML>JAXB>XML
我有一个案例，其中一个 xml 作为输入，另一个 xml 作为输出:我可以选择使用 XSL 和通过 JAXB 进行 Unmarshalling 编码。性能方面，有什么真正的区别吗？最佳答案首先，程
java - 从 XML 元素获取 XML 时的标签顺序(XML 包含 XML)？
我有包含 XML 的 XML，我想使用 JAXB 解析它 qwqweqwezxcasdasd eee 解析器 public static NotificationRequest parse(Strin
xml - 无法使用 XML 架构和 Perl (XML::LibXML) 验证 XML
xml: mario de2f15d014d40b93578d255e6221fd60 Mario F 23 maria maria
java.net.MalformedURLException : no protocol: [c:\XML\file. xml，c :\XML\file2. xml，c :\XML\file3. xml]
尝试更新 xml 文件数组时出现以下错误。代码片段: File dir = new File("c:\\XML"); File[] files = dir.listFiles(new Filenam
xml - 如何使用 ConvertTo-Xml 和 Select-Xml 加载或读取 XML 文件？
我怎样才能完成这样的事情: PS /home/nicholas/powershell> PS /home/nicholas/powershell> $date=(Get-Date | ConvertT
xml - 删除 XML 节点以将 XML 日志文件的大小减小到给定大小
我在从 xml 文件中删除节点时遇到一些困难。我发现很多其他人通过各种方式在 powershell 中执行此操作的示例，下面的代码似乎与我见过的许多其他示例相同，但我没有得到所需的行为。我的目标是将

首页

博学

6Ren·AI

商城

javascript - 通过导入 xml 创建 HTML 表时的 DataTables