Как установить автоматически увеличенный столбец Id в таблицах jQuery при использовании метода render

Question

У меня есть jQuery Datatable, как показано ниже

 let purchasedProductTbl = $('#grdPurchasedProduct').DataTable({
            filter: false,
            paging: false,
            lengthChange: false,
            searching: false,
            ordering: false,
            autoWidth: false,
                language: {
                    paginate: {
                        next: '→', // or '→'
                        previous: '←' // or '←'
                    },
                    emptyTable: "No data available.."
                },
                columnDefs: [
                    {
                        "defaultContent": "-",
                        "targets": "_all"
                    }
                ],
            columns: [
                {
                    data: "active",
                    render: function (data, type, row) {
                        console.log(row)
                        console.log(data)
                        console.log(row().index())
                        if (type === 'display') {
                            return '<div class="ckbox"><input type="checkbox" style="width:15px"; id=childCheckbox' + row.id + '><label for="childCheckbox' + row.id + '"></label></div>'
                        }
                        return data;
                    },
                    className: "dt-body-center"
                },

                   {
                        "render": function (d, t, r) {
                            let $select = $("<input type='text' class='product-unit' disabled/>", {
                                "id": r[0] + "start",
                                "value": d
                            });

                            return $select.prop("outerHTML");
                        }
                    }

                ]
        });

В этом примере первый столбец - checkbox.Я использовал label для стилизации его по-другому, основываясь на моем стиле, когда идентификатор checkbox совпадает с атрибутом label-for, тогда он будет работать как checkbox.Моя проблема в том, что у меня есть много столбцов в этой сетке, все они генерируются динамически, поэтому я не получаю никакого числа unique для дифференцирования каждого checkboxes.Можно ли в любом случае дать unique идентификатор или автоматически сгенерированный идентификатор для столбцов такого типа?

Я попытался получить номер строки, но здесь сама строка выглядит как пустой массив.

Есть ли другой способ получить row number или некоторые другие unique числа для каждого метода рендеринга строки?

Любая помощь будет оценена.

Answer 1

Вы можете просто получить, как показано ниже,

   var t = $('#grdPurchasedProduct').DataTable({ ....... });



        t.on( 'order.dt search.dt', function () {
            t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
                cell.innerHTML = i+1;
            } );
        } ).draw();

Или вы хотите во время рендеринга, тогда вы можете просто получить

        {"render": function (data, type,full, row) {
            console.log(row.row);
            return '';
        }}

Надеюсь, это поможет вам.

Answer 2

Вы можете использовать из meta аргумента render обратного вызова. Он имеет индекс строки как свойство:

$('table').DataTable({
    ...
    columns: [{
        title: 'id',
        data: null,
        render: (data, type, row, meta) => meta.row
    },
    //the rest of your column definitions
    ...
    ]
})

Answer 3

Обновление: 07/04/2019

Мы можем использовать аргумент meta обратного вызова рендеринга.Он имеет индекс строки как свойство

  render: function (data, type, row,meta) {
//console.log(meta)
}

Другой подход

, поэтому я использовал приведенную ниже функцию для получения случайного числа

function uuidv4() {
  return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
  )
}

А потом использовал то же самое в моем datatable, как показано ниже

 {
                    data: "active",
                    render: function (data, type, row) {
                        var uniqueId = uuidv4();
                        if (type === 'display') {
                            return '<div class="ckbox"><input type="checkbox" style="width:15px"; id=childCheckbox' + uniqueId + '><label for="childCheckbox' + uniqueId + '"></label></div>'
                        }
                        return data;
                    },
                    className: "dt-body-center"
                }