Для этой цели вы можете использовать опцию columns.render.Он принимает данные вашей ячейки, тип данных ячейки, источник данных всей строки и номер строки / номер столбца в качестве аргументов.
Таким образом, для целевого столбца вы можете создать комбинированное поле, которое будет содержатьстолько полей, сколько необходимо, с указанием соответствующего имени свойства.
Например, если исходные данные для каждой строки вашей таблицы являются объектами, например:
{id: 'someid', name: 'somename', phone: 'somephone', mail: 'somemail'}
И вы хотели быобъедините phone и mail в объединенный столбец contacts, вы можете просто сделать:
$('#example').DataTable({
...
columns: [
{title: 'contacts', data: null, render: (data, type, row, meta) => `phone: ${row.phone}, e-mail: ${row.mail}`}
]
});
Завершить демонстрацию этой концепции, которую вы можете найти ниже:
//data sample that mimic response from your back-end PHP script
const srcData = [
{id: 1, name: 'Steve Rogers', phone: '+1987270123512', mail: 'cap@avengers.org'},
{id: 2, name: 'Tony Stark', phone: '+1987987235143', mail: 'ironman@avengers.org'},
{id: 3, name: 'Peter Parker', phone: '+1698701245121', mail: 'spidey@avengers.org'}
];
//datatables initialization
const dataTable = $('#example').DataTable({
dom: 't',
data: srcData,
columns: [
{title: 'id', data: 'id'},
{title: 'name', data: 'name'},
{title: 'contacts', data: null, render: (data, type, row, meta) => `phone: ${row.phone}, e-mail: ${row.mail}`}
]
});
<!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="example"></table>
</body>
</html>