Таблицы данных разделяют значение массива и выводят его в несколько таблиц в одной дочерней строке

#javascript #datatables

#javascript #таблицы данных

Вопрос:

Я использую таблицы данных (https://datatables.net /) для упорядочения данных, и я уже добился отображения данных в дочерней строке, чем больше я хочу сделать, так это показать в ней более подробные данные.

У меня есть данные 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] на «#» и показать формат данных в дочерней строке следующим образом

подробный код, который я пробовал, приведен по ссылке ниже http://live.datatables.net/bohoriga/1/edit

Ответ №1:

Вы можете создать вложенную таблицу внутри своей format(d) функции — что-то вроде этого:

 function format (d) {
    var sub_table = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
    
    var sub_rows = d.AVAINFO;
    var array_length = sub_rows.length;
    var sub_row = '';

    if (array_length) { // AVAINFO is an array of values:
      for (var i = 0; i < array_length; i  ) {
        sub_row = '<tr><td>'   sub_rows[i].RECIPE   '</td><td>'   sub_rows[i].ava   '</td></tr>';
        sub_table = sub_table   sub_row;
      }
    } else { // AVAINFO is a single object - not an array:
      sub_row = '<tr><td>'   d.AVAINFO.RECIPE   '</td><td>'   d.AVAINFO.ava   '</td></tr>';
      sub_table = sub_table   sub_row;
    }

    sub_table = sub_table   '</table>';
    return sub_table;
}

Однако имейте в виду, что в примере кода, на который вы ссылаетесь в вопросе, есть некоторые другие ошибки, которые необходимо исправить, прежде чем мой предлагаемый подход заработает.

Например, DataTable ссылается на несуществующие столбцы (например "targets": [4,5,6,7,8] , и в другом месте) и на несуществующие данные, например Type .

Кроме того, данные JSON в $ajax_data недопустимы. Это должен быть массив:

 $ajax_data = [
  {
    "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"
  },
  {
    "MACHINE": "A03",
    "STATUS": "IDLE",
    "TXN_TIME": "2020/11/30 21:25:43",
    "AVAINFO": {
      "RECIPE": "8PI",
      "ava": "Z90018#25#B1825#P#Z80238#20#B1115#P#Z20018#13#B0095#L#"
    },
    "ID": "2"
  }
];

1. Спасибо @andrewjames, я обновил ссылку на пример и попытался использовать slice() и .split() решить его, не могли бы вы дать мне больше советов, чтобы приблизиться к результату?

2. Я не уверен, что вы имеете в виду. Какую конкретную проблему вы пытаетесь решить?

Ответ №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>';
}