[英]What is the fastest way to create HTML table with data from JavaScript array?
I have the following code to convert my JSON dataset to html table. 我有以下代码将JSON数据集转换为html表。 I want to know if it is the fastest method, or should I use jqote2 with jquery to write template?
我想知道这是否是最快的方法,还是应该将jqote2与jquery一起使用来编写模板?
So can somebody guide me if I am on right track or am I working on something that already exists? 因此,如果我在正确的轨道上工作或正在从事已经存在的工作,有人可以指导我吗?
<div id="hii"><!-- table loads here --></div>
<script>
var set1={ // JSON dataset & col definitions
'col':[ // definition/template of data to load in column cells
[function(x){return '<a href="?sid='+x[1]+'">'+x[0]+'</a>';}],
[function(x){return '<a href="?id='+x[2]+'">'+x[2]+'</a>';}],
],
'data':[ // raw data, output table has only 2cells/row using these 3 values from each row
['Name 1','00000001','Value 1'],
['Name 2','00000002','Value 2'],
['Name 3','00000003','Value 3'],
['Name 4','00000004','Value 4'],
['Name 1','00000001','Value 5'],
['Name 5','00000005','Value 1'],
['Name 6','00000006','Value 1'],
['Name 7','00000007','Value 2'],
['Name 8','00000008','Value 6'],
['Name 9','00000009','Value 3'],
['Name A','00000010','Value 7'],
['Name B','00000011','Value 7'],
['Name C','00000012','Value 1'],
],
};
function tbody(x){ // function to create table, using dataset name passed to x
for(i=0,data='';i<x.data.length;i++){
data+='<tr>';
for(j=0;j<x.col.length;j++){
data+='<td>'+x.col[j][0](x.data[i])+'</td>';
}
data+='</tr>';
}
return data;
}
document.getElementById('hii').innerHTML='<table>'+tbody(set1)+'</table>';
</script>
You can use Datatables . 您可以使用Datatables 。 It works with jQuery and is also themable.
它可以与jQuery一起使用,也可以使用。 There are quite a few options you can set that can meet your requirements, and even more.
您可以设置很多选项来满足您的要求,甚至更多。
jquery/jqote can do this too: jquery / jqote也可以做到这一点:
$('#container tbody').empty().html($('#row_template').jqote(set1));
<script type="text/x-jqote-template" id="row_template">
<![CDATA[
<tr id="<%=this.id%>_valuebox">
<td><%=this.name%></td>
<td><%=this.value%></td>
</tr>
]]>
</script>
It is not so easy to do. 这并非易事。 Take a look at Sencha (extJS), especially Grids - http://www.sencha.com/learn/legacy/Tutorials , http://www.sencha.com/learn/legacy/Tutorials#Grids
看一下Sencha(extJS),尤其是网格-http: //www.sencha.com/learn/legacy/Tutorials,http : //www.sencha.com/learn/legacy/Tutorials#Grids
Take a look at the jQuery Templates Plugin. 看一下jQuery模板插件。
http://api.jquery.com/category/plugins/templates/ http://api.jquery.com/category/plugins/templates/
<ul id="movieList"></ul>
<script id="movieTemplate" type="text/x-jquery-tmpl">
<li><b>${Name}</b> (${ReleaseYear})</li>
</script>
<script type="text/javascript">
var movies = [
{ Name: "The Red Violin", ReleaseYear: "1998" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
{ Name: "The Inheritance", ReleaseYear: "1976" }
];
// Render the template with the movies data and insert
// the rendered HTML under the "movieList" element
$( "#movieTemplate" ).tmpl( movies )
.appendTo( "#movieList" );
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.