Javascript DataTables拆分数组值并在单个子行中呈现给多个表

我使用DataTables（）进行数据排列，并且我已经实现了在子行中显示数据，我越想在子行中显示更详细的数据

我有一个类似这样的JSON数据

{
    "MACHINE": "A01",
    "STATUS": "ENGTEST",
    "TXN_TIME": "2020/09/17 00:04:15",
    "AVAINFO": [
      { 
        "RECIPE": "8EX-001",
        "ava": "Z03341#25#A9161#P#Z03934#5#A9021#P"
      },
      {
        "RECIPE": "8EX-005",
        "ava": "Z80597#3#B3542#L"
      }
    ],
    "ID": "1"
  }

我想用“#”拆分[ava]，并在子行中显示数据格式，如下所示

我尝试的详细代码如下链接所示

---

您可以在

格式（d）

函数中构建一个子表，如下所示：

函数格式（d）{
var sub_表=“”；
var sub_rows=d.AVAINFO；
var array_length=sub_rows.length；
var sub_行=“”；
如果（array_length）{//AVAINFO是一个值数组：
对于（var i=0；i

但是，请记住，您在问题中链接到的代码示例中还有一些其他错误，需要在我提出的方法开始工作之前修复这些错误

例如，DataTable引用不存在的列（例如，

“目标”：[4,5,6,7,8]

等）和不存在的数据，例如，

类型

另外，

$ajax\u data

中的JSON数据无效。它需要是一个数组：

$ajax\u数据=[
{
“机器”：“A01”，
“状态”：“英语测试”，
“TXN_时间”：“2020/09/17 00:04:15”，
“可用信息”：[
{ 
“配方”：“8EX-001”，
“ava”：“Z03341#25#A9161#P#Z03934#5#A9021#P”
},
{
“配方”：“8EX-005”，
“ava”：“Z80597#3#B3542#L”
}
],
“ID”：“1”
},
{
“机器”：“A03”，
“状态”：“空闲”，
“TXN_时间”：“2020/11/30 21:25:43”，
“可用信息”：{
“配方”：“8PI”，
“ava”：“Z90018-25-B1825-P-Z80238-20-B1115-P-Z20018-13-B0095-L”
},
“ID”：“2”
}
];

您可以在

格式（d）

函数中构建一个子表，如下所示：

函数格式（d）{
var sub_表=“”；
var sub_rows=d.AVAINFO；
var array_length=sub_rows.length；
var sub_行=“”；
如果（array_length）{//AVAINFO是一个值数组：
对于（var i=0；i

但是，请记住，您在问题中链接到的代码示例中还有一些其他错误，需要在我提出的方法开始工作之前修复这些错误

例如，DataTable引用不存在的列（例如，

“目标”：[4,5,6,7,8]

等）和不存在的数据，例如，

类型

另外，

$ajax\u data

中的JSON数据无效。它需要是一个数组：

$ajax\u数据=[
{
“机器”：“A01”，
“状态”：“英语测试”，
“TXN_时间”：“2020/09/17 00:04:15”，
“可用信息”：[
{ 
“配方”：“8EX-001”，
“ava”：“Z03341#25#A9161#P#Z03934#5#A9021#P”
},
{
“配方”：“8EX-005”，
“ava”：“Z80597#3#B3542#L”
}
],
“ID”：“1”
},
{
“机器”：“A03”，
“状态”：“空闲”，
“TXN_时间”：“2020/11/30 21:25:43”，
“可用信息”：{
“配方”：“8PI”，
“ava”：“Z90018-25-B1825-P-Z80238-20-B1115-P-Z20018-13-B0095-L”
},
“ID”：“2”
}
];

我参考了其他相关问题，然后通过添加

.splice（）

，

.slice（）

，并使用循环创建子行来解决此问题

function separate(arr, size) {
  let res = [];
  while (arr.length) {
    res.push(arr.splice(0, size));
  }
  return res;
}

function format ( d ) {
  var tr = '';
  d.AVAINFO.forEach(function (item) {
    var  a = item.ava.split("#");
    result = separate(a, 4)   
    //console.log(result);
  tr += '<tr>'+          
            '<th>Recipe</th>'+
            '<th>ORDER</th>'+
            '<th>QTY</th>'+
            '<th>CODE</th>'+
            '<th>TYPE</th>'+
        '</tr>';
  
    for (i=0; i<result.length; i++) {
        tr += '</tr>'+
        '<tr>'+
            '<td>'+item.RECIPE+'</td>'+
            '<td>'+result[i][0]+'</td>'+
            '<td>'+result[i][1]+'</td>'+
            '<td>'+result[i][2]+'</td>'+
            '<td>'+result[i][3]+'</td>'+
        '</tr>';
    }
  });
  
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
      tr +
      '</table>';
}

功能分离（arr、大小）{
设res=[]；
while（arr.length）{
再推（arr.拼接（0，尺寸））；
}
返回res；
}
函数格式（d）{
var tr=''；
d、 AvailInfo.forEach（功能（项目）{
var a=项目的平均分割（“#”）；
结果=单独的（a，4）
//控制台日志（结果）；
tr+=''+
“配方”+
“订单”+
“数量”+
“代码”+
“类型”+
'';
对于（i=0；i我参考了其他相关问题，然后通过添加
.splice（）
，
.slice（）
，并使用循环创建子行来解决此问题

function separate(arr, size) {
  let res = [];
  while (arr.length) {
    res.push(arr.splice(0, size));
  }
  return res;
}

function format ( d ) {
  var tr = '';
  d.AVAINFO.forEach(function (item) {
    var  a = item.ava.split("#");
    result = separate(a, 4)   
    //console.log(result);
  tr += '<tr>'+          
            '<th>Recipe</th>'+
            '<th>ORDER</th>'+
            '<th>QTY</th>'+
            '<th>CODE</th>'+
            '<th>TYPE</th>'+
        '</tr>';
  
    for (i=0; i<result.length; i++) {
        tr += '</tr>'+
        '<tr>'+
            '<td>'+item.RECIPE+'</td>'+
            '<td>'+result[i][0]+'</td>'+
            '<td>'+result[i][1]+'</td>'+
            '<td>'+result[i][2]+'</td>'+
            '<td>'+result[i][3]+'</td>'+
        '</tr>';
    }
  });
  
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
      tr +
      '</table>';
}

功能分离（arr、大小）{
设res=[]；
while（arr.length）{
再推（arr.拼接（0，尺寸））；
}
返回res；
}
函数格式（d）{
var tr=''；
d、 AvailInfo.forEach（功能（项目）{
var a=项目的平均分割（“#”）；
结果=单独的（a，4）
//控制台日志（结果）；
tr+=''+
“配方”+
“订单”+
“数量”+
“代码”+
“类型”+
'';
对于（i=0；i谢谢@andrewjames，我更新了示例的链接，并尝试使用
slice（）
和
.split（））
要解决这个问题，你能给我更多的建议来接近结果吗？我不知道你的意思。你想解决什么具体问题？谢谢@andrewjames，我更新了示例的链接，并尝试使用
slice（）
和
.split（））
要解决这个问题，你能给我更多的建议来接近结果吗？我不知道你的意思。你想解决什么具体问题？很好！-很高兴你找到了你需要的。很好！-很高兴你找到了你需要的。