通过导入xml创建HTML表格时的DataTables [英] DataTables when HTML table is created through import of xml
问题描述
我有点迷路，看不出我的代码有什么问题。这里是我通过jquery加载xml文件的情况。我想在我的html表上使用DataTables。不幸的是它不起作用（我的意思是创建表，但插件不活跃）。我尝试了不同的方式，通过在代码中手动输入我的数据来创建HTML表格，然后运行。由于所有提供DataTables的示例都与已经创建的HTML表格一起使用，有人可以帮助我如何在通过jQuery创建HTML表格时使DataTables工作：
My xml数据称为rocol
<？xml version =1.0encoding =UTF-8？>
- <文件>
- < 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 =stylesheettype =text / csshref =https://cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css/>
< script>
$ b $（文档）.ready（函数（）{
$ .ajax（{
类型：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 =chartclass =displaycellspacing =0width =50％>
< thead>
< tr>
< th>订单< / th>
第Dataheader< / th>
< th> Dataheader2< / th>
< / tr>
< / thead>
< tfoot>
< tr>
< th>订单< / th>
第Dataheader< / th>
< th> Dataheader2< / th>
< / tr>
< / tfoot>
< tbody>
< tr>< / tr>
< / tbody>
< / table>
< / body>
< / html>
预先致谢
saskap 除了与异步性有关的显而易见的问题 - 在AJAX完成之前dataTable被初始化 - 建立这样的表通常不是个好主意以编程方式布局，特别是在处理dataTable时。由于dataTables会重新生成< tbody> 结构，所以它很难维护，也很难读取，但也会产生开销。如果你有很多记录，它可能会对性能产生不公平的负面影响。我建议您将XML解析为有效数据数组，并将该 array 作为 data 的dataTables。例子：
$ b
function loadData（rocol）{
var data = [];
$（rocol）.find（'row'）。each（function（）{
data.push（[
$（this）.find（Col0）。text（） ，
$（this）.find（Col1）。text（），
$（this）.find（Col2）.text（）
]）
}）
返回数据;
$（＃chart）。DataTable（{
data：loadData（rocol）
}）
demo - > http：/ /jsfiddle.net/mond9ret/
通过AJAX加载的最终代码为
$。ajax（{
url：rocol.xml，
success：function（xml）{
$（＃chart）.DataTable（{
data：loadData（xml）
}）
}
}）
这确保了
- 事情发生顺序正确
- 易于维护
- 让dataTables自己构建表。
I am a bit lost and can't see what is wrong with my code. Here is the situation I am loading an xml file through jquery. I would like then use DataTables on my html tables. Unfortunately it doesn't working ( I mean table is created but the plugin is not active ). I have tried differently, by creating an HTML table by entering manually my data in my code then it worked. As all the example provide with DataTables are with HTML tables that have already been created,can someone help me how to make DataTables working when HTML table is created through jquery:
My xml data called 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>My code :
<!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>Thanks in advance
saskap
解决方案Beside the obvious problem with asynchronicity - the dataTable is initialised before your AJAX has finished - it generally is a bad idea to build such table layouts programmatically, especially when dealing with dataTables. It is hard to maintain and hard to read, but also produces an overhead since dataTables will regenerate the
<tbody>structure anyway. If you have many records it can have an unnessecary negative impact on performance. I would suggest that you parse the XML into a valid data array and pass thatarrayto dataTables asdata. Example :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) })demo -> http://jsfiddle.net/mond9ret/
The final code when loading via AJAX would be
$.ajax({ url: "rocol.xml", success: function(xml) { $("#chart").DataTable({ data: loadData(xml) }) } })This ensures
- Things happends in the right order
- Easier to maintain
- You let dataTables itself build the table.
这篇关于通过导入xml创建HTML表格时的DataTables的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
