logo标签列表

Datatable循环遍历明细/子行

javascriptjqueryajaxdatatables
3

我希望能够显示数据表中每个子行的内容

假设我的ajax数据如下：

"data": [
{
  "date"      : "1/17/2016",
  "supplier"  : "supplier1",
  "total"     : "$10",
  "payment"   : "Cash",
  "product" : Array[2] 
     0: "product1"
     1: "product2"
  "price" : Array[2]
     0: "$5"
     1: "$5"
},
{
  "date"      : "2/1/2016",
  "supplier"  : "supplier2",
  "total"     : "$3",
  "payment"   : "Cash",
  "product" : Array[1] 
     0: "product1"
  "price" : Array[1]
     0: "$3"
},
{
  "date"      : "1/17/2016",
  "supplier"  : "supplier3",
  "total"     : "$15",
  "payment"   : "Cash",
  "product" : Array[3] 
     0: "product1"
     1: "product2"
     2: "product3"
  "price" : Array[2]
     0: "$3"
     1: "$5"
     2: "$7"
},

我想创建一个数据表格子行，用于显示“产品和价格”数组。请参考此链接。

我只需要编辑function format函数中的脚本以满足我的需求，如下所示。

function format ( d ) {
    // `d` is the original data object for the row
    return '<table class="table table-border table-hover">'+
      '<tr>'+
         '<td>Product</td>'+
         '<td>Price</td>'+
      '</tr>' +

      '<?php 
          $loop = 5; 
          echo $loop;             <-- here

          for ($i=0; $i<$loop; $i++) {                      
             echo "<tr><td>'+d.product['$i']+'</td> <td>'+d.price['$i']+'</tr>"; 
       } ?>' +

    '</table>';
}

它运行得相当不错...我可以像我想要的那样显示数据..但我必须手动定义$loop..

我尝试使用$loop = "'+d.product.length+'"
当我在php中echo该变量时
它会显示实际值
（假设我在product中有3个数组，它也会显示3）

但不知何故，当它进入for部分时，就好像$loop变成了0
因为没有显示任何行（如果我将条件设置为$i<=$loop，则在每个父行中显示一行详细信息）

我也发现了一些奇怪的事情
$loop = "'+d.product_.length+'" . "'+d.product_.length+'";
echo $loop ==> 33 （假设产品数组计数为3）

但是如果我将其更改为sum，它的结果是0
$loop = "'+d.product_.length+'" + "'+d.product_.length+'";
echo $loop ==> 0 （假设产品数组计数也为3）

如何解决它，以便我可以知道我的脚本应该循环多少次

@GuruprasadRao，我不知道如何在演示中添加我的ajax数据源...但我猜应该是这样的https://jsfiddle.net/nnb97rh9/47/ 你介意帮忙编辑一下，以便包含我的ajax数据（在顶部发布）吗？ - Surya Matadewa
@GuruprasadRao 我的问题基本上是要自动设置变量 $loop ... 但我猜想当使用 javascript var 设置 $loop 时，PHP 会出现问题... 我想我可能采取了错误的方法。 - Surya Matadewa
@GuruprasadRao，你能给个例子吗？我还不太明白...我还在学习Ajax和jQuery :D...我也会在我的帖子中添加真实数据...等一下。 - Surya Matadewa
@GuruprasadRao 我只需要复制 console.log 返回的 JSON，对吗？如果不是，你能给我一个链接教程，告诉我如何获取正确的 JSON 数据吗？ - Surya Matadewa
1个回答
7

在这里，你不需要使用php来循环追加额外的表格，相反你可以使用jquery的$.each。你只需要在append之前构建好你的表格体结构如下：

/* Formatting function for row details - modify as you need */
function format ( d ) {
    console.log(d.product);
    var trs=''; //just a variable to construct
    $.each($(d.product),function(key,value){
        trs+='<tr><td>'+value+'</td><td>'+d.price[key]+'</td></tr>';
        //loop through each product and append it to trs and am hoping that number of price 
        //values in array will be equal to number of products
    })
    // `d` is the original data object for the row
    return '<table class="table table-border table-hover">'+
           '<thead>'+
              '<th>Product</th>'+
                '<th>Price</th>'+  
           '</thead><tbody>' 
               + trs +
        '</tbody></table>';
}

$(document).ready(function() {
    var table = $('#example').DataTable({
        "ajax": 'https://raw.githubusercontent.com/kshkrao3/JsonFileSample/master/Employees.json',
        "columns": [
            {
                "class":          'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "date"},
            { "data": "supplier"},
            { "data": "total"},
            { "data": "payment"}
        ]
    });

    // Add event listener for opening and closing details
   $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        if ( row.child.isShown() ) {
          // This row is already open - close it
          row.child.hide();
          tr.removeClass('shown');
        }
        else {
          // Open this row
          row.child( format(row.data()) ).show();
          tr.addClass('shown');
        }
    });
});

注意: 在您的click事件中出现了错误。您尝试在事件中使用dTable.row，但实际上应该是table.row，因为您已经将引用存储在table变量中。 演示
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接