Виртуальные поля в DataTables

Данные, которых нет... Тесты, которых нет... Ладно, не будем о грустном.

Предположим, у нас есть список имен и фамилий некоторых подозрительных личностей. Нам нужна таблица, в которой будут следующие колонки:

1. Имя.
2. Фамилия.
3. Имя + Фамилия (те самые загадочные данные).

Давайте начнем с малого и сделаем таблицу c идентификатором names, содержащую только имя и фамилию:

// Прекрасно! Ничего лишнего!
$('#names').DataTable({
  data: [
      {firstName: 'John', lastName: 'Doe'},
      {firstName: 'Jane', lastName: 'Doe'}
    ],
    columns: [
      {title: "First name", data: "firstName"},
      {title: "Second name", data: "lastName"}
    ]
});

Появляется мысль, что этого достаточно, но руководство упорствует - они хотят колонку, где указано полное имя. Думая разное про себя, идем читать документацию библиотеки и находим опцию columns.render.

Много хорошего и разного поволяет делать она. Дабы не усложнять, зададим значение по умолчанию _:

columns: [
  {title: "First name", data: "firstName"},
  {title: "Second name", data: "lastName"},
  {
    title: "Full name",
    data: null,
    render: {
        _: function (rowData) {
        return rowData.firstName + ' ' + rowData.lastName;
      }
    }
  }
]

Вот и сбылась мечта - создано полноценное виртуальное поле!

Лицензия от С полным рабочим примером можно ознакомиться прямо здесь.