Как преобразовать данные, разделенные точкой с запятой, в отдельные строки в ячейке DataTable - PullRequest
Новая
       15

Как преобразовать данные, разделенные точкой с запятой, в отдельные строки в ячейке DataTable

0 голосов
/ 18 апреля 2019

У меня есть массив в документе JSON.Ниже приведен один элемент из этого массива: 

{
    "generalSolution": "Cloud",
    "generalOperator": "MTN",
    "genericCountry": "USA",
    "vnfProductName": "vEPG;vSAPC;vSGSN-MME",
    "vnfRelease": "2.4;1.3;v1.2399999",
    "vnfVendor": "Ericsson;Ericsson;Ericsson"
}

Я хотел бы отобразить данные в DataTables в виде одной строки, например:

enter image description here

Обратите внимание, что детали vnf (vnfProductName, vnfRelease, vnfVendor) могут иметь переменное количество записей.

Ответы [ 2 ]

1 голос
/ 18 апреля 2019

Используйте параметр render для преобразования ваших данных при рендеринге: 

//use JSON excerpt as a data source
var srcData = [{
    "generalSolution": "Cloud",
    "generalOperator": "MTN",
    "genericCountry": "USA",
    "vnfProductName": "vEPG;vSAPC;vSGSN-MME",
    "vnfRelease": "2.4;1.3;v1.2399999",
    "vnfVendor": "Ericsson;Ericsson;Ericsson"
}];

//initialize DataTables
const dataTables = $('#mytable').DataTable({
  data: srcData,
  dom: 't',
  //map all property keys (assuming, set of properties is uniform for all array entries)
  //into array, expected by 'columns' option: [{title: ..., data: ...}...]
  columns: Object.keys(srcData[0]).map(propertyKey => ({title: propertyKey, data: propertyKey})),
  //use additionally 'columnDefs' option to apply 'render' callback to certain columns
  columnDefs: [{
    targets: [3, 4, 5],
    //replace semicolons in each cell contents within columns 3, 4, 5 with new line tag `<br>`
    render: (data, type, row, meta) => data ? data.replace(/;/g, '<br>') : ''
  }]
});
<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="mytable"></table>
</body>
</html>
1 голос
/ 18 апреля 2019

Просто замените ; на <br> на String#replace.

Это пример. Здесь исходный объект изменен. Подумайте, если нужно, измените идентификатор. 

$(document).ready(() => {
  const obj = {
    "generalSolution": "Cloud",
    "generalOperator": "MTN",
    "genericCountry": "USA",
    "vnfProductName": "vEPG;vSAPC;vSGSN-MME",
    "vnfRelease": "2.4;1.3;v1.2399999",
    "vnfVendor": "Ericsson;Ericsson;Ericsson"
  };

  for (let key in obj) {
    // Here!
    obj[key] = obj[key].replace(/;/g, '<br>');
  }
  
  $('#dt').DataTable({
    data: [obj],
    columns: [
      {data: 'generalSolution'},
      {data: 'generalOperator'},
      {data: 'genericCountry'},
      {data: 'vnfProductName'},
      {data: 'vnfRelease'},
      {data: 'vnfVendor'}
    ]
  });
});
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="dt">
  <thead>
    <tr>
      <th>generalSolution</th>
      <th>generalOperator</th>
      <th>genericCountry</th>
      <th>vnfProductName</th>
      <th>vnfRelease</th>
      <th>vnfVendor</th>
    </tr>
  </thead>
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...