Question

我有一个如下所示的jQuery数据表

 let purchasedProductTbl = $('#grdPurchasedProduct').DataTable({
            filter: false,
            paging: false,
            lengthChange: false,
            searching: false,
            ordering: false,
            autoWidth: false,
                language: {
                    paginate: {
                        next: '&#8594;', // or '→'
                        previous: '&#8592;' // 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 id与checkbox属性匹配时，我根据自己的风格使用了label-for作为样式，它的工作方式类似于checkbox。我的问题是，此网格中有许多列都是动态生成的，因此我没有得到用于区分每个unique的任何checkboxes数字。无论如何，是否为此类列提供unique ID或自动生成的ID？

我试图获取行号，但是这里行本身是空数组。

是否还有其他选项可以为每行渲染方法获取row number或其他unique个数字？

任何帮助将不胜感激。

Answer 1

更新：2019/07/04

我们可以使用渲染回调的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"
                }

Answer 2

您可以简单地获得如下内容，

   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 3

您可以在meta回调的render参数中make use。它具有行索引作为属性：

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

如何使用渲染方法在jQuery表中设置自动递增的ID列

3 个答案: