Определение столбца jQuery DataTables для нескольких полей данных
Я использую jQuery DataTables с обработкой на стороне сервера для своего списка. Но у меня проблема: я хочу отображать данные нескольких столбцов из базы данных в одном столбце (заголовке). Итак, как я могу определить свой столбец?
<?php
$columns = array(
array( 'db' => 'ass_id', 'dt' => 0 ),
array( 'db' => 'ass_customer_id', 'dt' => 1 ),
array( 'db' => 'ass_customer_id', 'dt' => 2 ),
array( 'db' => 'ass_id', 'dt' => 3 ),
array( 'db' => 'ass_id', 'dt' => 4 ),
array( 'db' => 'ass_id', 'dt' => 5 ),
array( 'db' => 'ass_id', 'dt' => 6 ),
array( 'db' => 'ass_id', 'dt' => 7 ),
array( 'db' => 'ass_rec_letter_sent', 'dt' => 8 )
);
?>
В приведенном выше коде я определил 8-й столбец как ass_rec_letter_sent, но в этом же столбце у меня есть еще 2 поля данных для отображения, поэтому я не могу понять, как я могу это сделать.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Для этой цели вы можете использовать опцию 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: '[email protected]'},
{id: 2, name: 'Tony Stark', phone: '+1987987235143', mail: '[email protected]'},
{id: 3, name: 'Peter Parker', phone: '+1698701245121', mail: '[email protected]'}
];
//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>Если ваша первоначальная проблема решена с помощью приведенного выше ответа, вы можете проголосовать и принять это, а затем опубликовать другой вопрос с другой проблемой, и я с удовольствием рассмотрю это.
Спасибо, я применю это, но до этого у меня возникла другая проблема, которая показывает «Показано от 1 до 25 из 5004 элементов (отфильтровано из 5006 элементов)», но все данные (5006) загружаются на одной странице. и в консоли не отображается никаких ошибок, а проверенный параметр и длина равны 25, так зачем загружать все данные?