Как сделать колонку с действиями для dataTables?

Question

[karasique]

Есть такая таблица:

<table id="datatables" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">
       <thead>
          <tr>
             <th>Название карточки</th>
             <th>Имя</th>
             <th>Номер</th>
             <th class="disabled-sorting sorting"> Действия </th>
          </tr>
       </thead>
       <tbody>
       </tbody>
    </table>

js:

<script type="text/javascript" language="javascript" >
       $(document).ready(function() {
       	var dataTable = $('#datatables').DataTable( {
       		"processing": true,
       		"serverSide": true,
       		"ajax":{
       			url :"getData.php", // json datasource
       			type: "post",  // method  , by default get
       			error: function(){  // error handling
       				$(".datatables-error").html("");
       				$("#datatables").append('<tbody class="error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
       				$("#datatables_processing").css("display","none");
       				
       			}
       		}
       	} );
       } );
    </script>

А вот php обработчик : pastebin

Как вывести в колонку "действия" такой код?

<td class="td-actions text-right">
    <a target="_blank" href="/clients/i?getInfo=".$row['id']." rel="tooltip" title="Просмотр/изменение" class="btn btn-info btn-simple btn-xs">
    	<i class="ti-user"></i>
    </a>
    <a href="#" rel="tooltip" title="Удалить" class="btn btn-danger btn-simple btn-xs">
    	<i class="ti-close"></i>
    </a>
    </td>

Answer 1

[Stalker_RED]

Примерно так:

columnDefs: [
                {
                    "render": generateUserProfileLink,
                    "targets": 1,
                },
                {
                    "render": generateBalanceLink,
                    "targets": 5,
                },
                { "visible": false,
                    "targets": [ 3 ]
                }
            ],

В первую и пятую колонку будут вставлены ссылки, третья колонка будет скрыта.
Сама функция для генерации ссылки:

function generateBalanceLink(cellValue, type, row) {
            return '<a href="#" style="border-bottom: dashed 1px gray;" data-toggle="modal" data-target="#modal-balance" id="balanceBtn_' + row[0] + '" data-uid="' + row[0] + '" data-username="' + row[1] + '">' + (parseFloat(cellValue)||0) + '</a>';
        }

Comments

[karasique]

Спасибо! А как в функцию generateBalanceLink передать данные свои? row[0] etc?
Или, получается, я уже и так передаю эти данные в обработчике?

[Stalker_RED]

karasique, datatables передает три параметра, в примере они все есть.
Cellvalue - значение текущей ячейки. В row вся строка. В type тип операции. Рендер, сортировка, что.то еще. Можно для разных типов запросов возвращать разные значения. К примеру дата - при сортировке возвращаем timestamp, а для визуального отображения строку типа "пятое сентября"

[karasique]

Stalker_RED, Огромное вам спасибо!)

[karasique]

Stalker_RED, а не подскажете, каким образом в моем случае вывести массив в одну из колонок? num,num2,num3?

[Stalker_RED]

karasique,

[karasique]

Stalker_RED, это в функцию обернуть такой вывод?

[Stalker_RED]

karasique, я не совсем понимаю вопрос. Вы можете для любой колонки сделать свой обработчик
вот пример:

конфиг

config.columnDefs = [
                {
                    "render": generateAdmincrmUserLink,
                    "targets": 0,
                },
                {
                    "width": "25%",
                    "render": generateUserLink,
                    "targets": 1,
                },
                {
                    "render": generateBalanceLink,
                    "targets": getColId("Баланс"),
                },
                {
                    "render": replaceCommaWithSpace,
                    "targets": [
                        getColId("Телефон"),
                        getColId("Телефон SMS"),
                    ],
                },
                {
                    "render": generateMailtoLink,
                    "targets": [
                        getColId("email"),
                    ],
                },
                {
                    "render": dateFormat,
                    "targets": [
                        getColId("Регистрация"),
                        getColId("Последний визит")
                    ],
                },
}

Сами функции

function replaceCommaWithSpace(val) {
            return val ? val.replace(',', ' ') : val
        }
        function generateMailtoLink(cellValue) {
            return cellValue ? `<a href="mailto:${cellValue}">${cellValue}</a>` : ''
        }

хитрожопая штука для даты, с кешированием

function dateFormatGenerator() {
            let cache = new Map()
            let dateFormatterToday    = new Intl.DateTimeFormat('ru-RU', { hour: 'numeric', minute: 'numeric' })
            let dateFormatterLastYear = new Intl.DateTimeFormat('ru-RU', { month: 'long', day: 'numeric' })
            let dateFormatterPast     = new Intl.DateTimeFormat('ru-RU', { month: 'short', year: 'numeric' })
            let now = new Date()
            let yearAgo = new Date()
            yearAgo.setFullYear(now.getFullYear() - 1)

            function dateFormat(dateInput, type) {
                if (dateInput < '10') return ''
                let returnValue = '';
                let formatter;
                if (type === 'sort') { // при сортировке используется timestamp
                    returnValue = dateInput
                } else if (cache.has(dateInput)) {
                    returnValue = cache.get(dateInput)
                } else { // при рендере текстовое значение
                    let date = new Date(dateInput)
                    let dateStr;
                    if (now.toDateString() === date.toDateString()) {   // today
                        formatter = dateFormatterToday
                    } else if (date > yearAgo) {                  // last year
                        formatter = dateFormatterLastYear
                    } else {
                        formatter = dateFormatterPast
                    }

                    try {
                        dateStr = formatter.format(date)
                    } catch (e) {
                        console.log('dateFormatError: ', e)
                    }

                    returnValue = `<span title="${dateInput}">${dateStr}</span>`
                    cache.set(dateInput, returnValue)
                }
                return returnValue
            }
            return dateFormat
        }

[karasique]

Stalker_RED, все, понял, спасибо большое)))