从数据库中获取的 Ajax 数据显示

Question

我有一个来自数据库的数据。并在调用 ajax 函数时显示。我能够显示它。但是，其中一个变量是数组数据，并使用 implode 函数将其保存。数据就像 (a,b,c,d)。

数据以以下格式显示

data1 Data2 Data3 (a,b,c,d) Data5 以此类推。

我想分解数组数据并在另一个下方打印一个。

我应该像这样显示它

data1 data2 data3  a  data5
                   b
                   c
                   d 

这是我为获取数据而编写的代码。

<script type="text/javascript">
                    $('#genreport').on('click',function(){
                    var Representativeid = document.getElementById("Representativeid").value;
                    var dateFrom = document.getElementById("dateFrom").value;
                    var dateTo = document.getElementById("dateTo").value;
                    var url = '{{URL::to('/admin/GenReport')}}';
                    $.ajax({
                      type : 'get',
                      url  : url,
                      data : {Representativeid:Representativeid,dateFrom:dateFrom,dateTo:dateTo},
                      success:function(data){
                        console.log(data);
                        var $tabledata = $('#tbody');
                        $tabledata.empty();
                        for (element in data)
                        {

                          var row = '<tr>' +
                             '<td>' + data[element].date + '</td>'+
                             '<td>' + data[element].doctor_name + '</td>'+
                             '<td>' @foreach(explode(',', data[element].products ) as $product) 
                                {{$product}}    
                             @endforeach '</td>' +
                              '<td>' + data[element].quantity + '</td>'+
                             '<td>' + data[element].locations +'</td>'+
                             '<td>' + data[element].area + '</td>'+
                             '</tr>';
                           $('#tbody').append(row);
                        }
                      },
                      error:function(data)
                      {
                        alert('fail');
                        alert(data);
                      }
                    });
                  });
                </script>

我在 for-each 逻辑中失败了。请帮我按预期显示。

Answer 1

您不能在您的 javascript/jQuery 代码（客户端）中使用 php 函数/代码（服务器端），因为 php 代码将在页面加载之前被解析。相反，您需要使用 javascript 代码。

首先，你需要将值拆分成一个数组

var productsArray = data[element].products.split(',');

那么您需要获取数组计数 (.length) 才能使用 rowspan，因此它不会破坏您的表格结构

var rowSpan = productsArray.length;
....
'<td rowspan="'+rowSpan+'">' + data[element].date + '</td>'+
....

最后，您需要在数组中循环使用 javascript，而不是 php。 （注意，因为i<0 <td>s 继续后续行，您需要在之后添加它们）

var rowAfter = "";
for (var i = 0; i < rowSpan; i++) {
  if(i == 0) {
    row += '<td>' + productsArray[i] + '</td>';
  } else {
    rowAfter += '<tr><td>' + productsArray[i] + '</td></tr>';
  }
}

所以它看起来像这样 -

                    for (element in data)
                    {
                      // get products into an array
                      var productsArray = data[element].products.split(',');
                      // get products array count
                      var rowSpan = productsArray.length;

                      var row = '<tr>' +
                         '<td rowspan="'+rowSpan+'">' + data[element].date + '</td>'+
                         '<td rowspan="'+rowSpan+'">' + data[element].doctor_name + '</td>';

                      // loop through products array
                      var rowAfter = "";
                      for (var i = 0; i < rowSpan; i++) {
                        if(i == 0) {
                          row += '<td>' + productsArray[i] + '</td>';
                        } else {
                          rowAfter += '<tr><td>' + productsArray[i] + '</td></tr>';
                        }
                      }

                      row += 
                         '<td rowspan="'+rowSpan+'">' + data[element].quantity + '</td>'+
                         '<td rowspan="'+rowSpan+'">' + data[element].locations +'</td>'+
                         '<td rowspan="'+rowSpan+'">' + data[element].area + '</td>'+
                         '</tr>';
                       // append both row and the <td>s in rowAfter
                       $('#tbody').append(row+rowAfter);
                    }

Answer 2

只需在foreach 中添加<tr><td>。

编辑： 另外，看看这个链接。 table inside a td