Jquery 如何使用dataTables呈现具有对象数组的单列表?
我有一个单列表,使用datatables 1.9.4每页显示10个结果。该表由dataTable ajax方法填充。我可以渲染每行一个值,但我需要能够渲染每行多个值。(想想json对象中的1行=1个数组。) 如何获取对象数组并将该对象数组渲染到单个列中? 我读了很多书。我运气不好 e、 g 渲染后的行将如下所示:Jquery 如何使用dataTables呈现具有对象数组的单列表?,jquery,datatables,jquery-datatables,Jquery,Datatables,Jquery Datatables,我有一个单列表,使用datatables 1.9.4每页显示10个结果。该表由dataTable ajax方法填充。我可以渲染每行一个值,但我需要能够渲染每行多个值。(想想json对象中的1行=1个数组。) 如何获取对象数组并将该对象数组渲染到单个列中? 我读了很多书。我运气不好 e、 g 渲染后的行将如下所示: <tr> <td> <a href="email@email.com" class="mail">Email Product
<tr>
<td>
<a href="email@email.com" class="mail">Email Product</a> <!-- this would come from product_email -->
<h3><a href="#">Product1</a></h3> <!-- this would come from product_name -->
<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, a, similique, fugit, ratione facere eius mollitia quo illo quos minus laborum suscipit vel nesciunt totam debitis? Nihil, rerum non sed.</p> <!-- this would come from product_description -->
</td>
</tr>
$(document).ready(function(){
$("#Tabla").html("<thead><tr><td>Email</td><td>Name</td><td>Action</td></tr></thead><tbody></tbody>");
$("#Tabla").dataTable({
"aaData": arreglo,
"aoColumns": [
{ "mData": "product_email" },
{ "mData": "product_name" },
{
"mData": null,
"mRender": function (data, type, full) {
var nombre = full.product_email ;
var a2 = '<h3><a href="#">'+full.product_name+'</a></h3>';
var desc = '<p class="description">'+full.priduct_description+'</d>';
return '<a href="'+nombre+'" class="mail">Email Product</a> ' + a2 + desc;
}
}
],
"bDestroy": true
}).fnDraw();
});
这是我对dataTables的调用
this.$el.find('table').dataTable({
sDom: '<"top">rt<"bottom"<"showing"i><"product-length"l><"product-pagination unlist horizontal"p>><"clear">',
sPaginationType: 'full_numbers',
oLanguage: {
oPaginate: {
sFirst: '<<',
sLast: '>>',
sNext: '>',
sPrevious: '<'
}
},
bProcessing: true,
bServerSide: true,
sAjaxSource: 'products.php',
/*columns: [
{ data: '[]' }
],*/
fnServerData: function(sSource, aoData, fnCallback) {
console.log(sSource, aoData, fnCallback);
}
});
this.$el.find('table').dataTable({
sDom:'rt',
sPaginationType:“完整编号”,
语言:{
蛋白石:{
第一个:'',
sNext:“>”,
sPrevious:“您可以尝试以下方法:
<tr>
<td>
<a href="email@email.com" class="mail">Email Product</a> <!-- this would come from product_email -->
<h3><a href="#">Product1</a></h3> <!-- this would come from product_name -->
<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, a, similique, fugit, ratione facere eius mollitia quo illo quos minus laborum suscipit vel nesciunt totam debitis? Nihil, rerum non sed.</p> <!-- this would come from product_description -->
</td>
</tr>
$(document).ready(function(){
$("#Tabla").html("<thead><tr><td>Email</td><td>Name</td><td>Action</td></tr></thead><tbody></tbody>");
$("#Tabla").dataTable({
"aaData": arreglo,
"aoColumns": [
{ "mData": "product_email" },
{ "mData": "product_name" },
{
"mData": null,
"mRender": function (data, type, full) {
var nombre = full.product_email ;
var a2 = '<h3><a href="#">'+full.product_name+'</a></h3>';
var desc = '<p class="description">'+full.priduct_description+'</d>';
return '<a href="'+nombre+'" class="mail">Email Product</a> ' + a2 + desc;
}
}
],
"bDestroy": true
}).fnDraw();
});
$(文档).ready(函数(){
$(“#Tabla”).html(“EmailNameAction”);
$(“#表”).数据表({
“aaData”:arreglo,
“aoColumns”:[
{“mData”:“产品电子邮件”},
{“mData”:“产品名称”},
{
“mData”:空,
“mRender”:功能(数据、类型、完整){
var nombre=完整的产品\电子邮件;
var a2='';
var desc=''+full.priduct_description+'';
返回“”+a2+desc;
}
}
],
“bDestroy”:正确
}).fnDraw();
});
Working fiddle:Hello@Dennis,如果您只是以正常方式初始化datatable…$('#示例').datatable({“ajax”:“products.php'})
…它正确地绘制了表吗???@RobertRozas不,它对我大喊大叫:uncaughttypeerror:无法读取未定义的属性“length”
。我想它对我大喊大叫是因为它只需要一个数组,而不是一个对象数组。这样:$('#yourTableID').dataTable({“ajax”:“products.php'))
…记住,您的表必须有一个thead
和一个tbody
,才能正确处理数据表:)@RobertRozas还在对我大喊大叫:(.你在对象数组方面运气好吗?如果是的话,请看一下你的数据结构?你的代码很好,这太棒了!我确实注意到了我和你之间的一些不同之处,一个是命名。我在json文件中的数组名为“data”,而不是“aaData”非常感谢您的帮助,罗伯特。没问题@DennisMartinez,使用数据表已经很多年了,所以我还知道一些技巧……随时可以问:)