JQuery Datatable 点击获取行数据

Question

我有一个关于 jquery 数据表的小问题。 我正在尝试制作表格，当我单击一行时，我需要从该行获取数据。 我发现这很像例子，但对我没有用：

var table = $('#table1').DataTable();
 
$('#myTable').on( 'click', 'tr', function () {
    var id = table.row( this ).id();
 
    alert( 'Clicked row id '+id );
} );

当我尝试这个时， id总是未定义的。

var table = $('#table1').DataTable();

    $('#example tbody').on('click', 'tr', function () {
        var data = table.row(this).data();
        alert('You clicked on ' + data[0] + '\'s row');
    });
});

当我尝试这个时也是如此。 我也看到了这个对我没有帮助的问题。

这是我在 HTML 中的表：

<div class="container">
    <table class="table table-hover" id="table1">
        <thead>
            <tr>
                <th>Nome</th>
                <th>Cgnome</th>
                <th>Ani</th>
                <th>Data</th>
                <th>Paese</th>
                    ....
            </tr>
        </thead>
    </table>
</div>

这就是我在 javascript 中尝试的：

    var oTable1;
    var id;
    $('#table1').on('click', 'tbody tr', function () {
        id = this.id; // is always `id = ""`
    });

$(document).ready(function () {
    LoadMissioniOptimizer();
});

function LoadMissioniOptimizer() {
    $.ajax({
        type: "GET",
        url: "/My/GetAppSettingFromKey?key=MissioniOptimizer",
        ASYNC: true,
        dataType: "json",
        success: function (data, textStatus, xhr) {
            var apiUrl = data;
            oTable1 =
                $('#table1').DataTable({
                    ajax: '/api/staff',
                    rowId: 'staffId',
                    scrollY: '50vh',
                    scrollCollapse: true,
                    paging: false,
                    scrollX: true,
                    destroy: true,
                    serverSide: false,
                    processing: true,
                    searching: true,
                    ordering: true,
                    orderMulti: false,
                    colReorder: true,
                    paging: true,
                    columns: [
                        { "data": "Nome", responsivePriority: 1, "searchable": true },
                        { "data": "Cognome", responsivePriority: 2, "searchable": true },
                        { "data": "Ani", responsivePriority: 3, "searchable": true },
                        { "data": "Data", responsivePriority: 4, "searchable": true },
                        { "data": "Paese", responsivePriority: 5, "searchable": true },
                                     .......
                        ],
                    columnDefs: [
                        {
                            render: $.fn.dataTable.render.text(),
                            targets: 0
                        },
                        {
                            render: $.fn.dataTable.render.text(),
                            targets: 1
                        },
                        {
                            render: $.fn.dataTable.render.text(),
                            targets: 2
                        },
                        {
                            render: $.fn.dataTable.render.text(),
                            targets: 3
                        },
                        {
                            render: $.fn.dataTable.render.text(),
                            targets: 4
                        },
                    ]
                });
            $.ajaxSetup({ cache: false });
        }
    });
};

Answer 1

我不了解数据表，但这里有一个简单的 JS，可以将所有 tr 行数据放入数组中。

只需将innerHTML更改为您实际需要的内容。

 var data = []; [...document.querySelectorAll('tr')].forEach(tr => { tr.addEventListener('click', event => { data = []; [...tr.children].forEach(td => { data.push(td.innerHTML); }) console.clear(); console.log(data) }) })

 <div class="container"> <table class="table table-hover" id="table1"> <thead> <tr> <th>Nome</th> <th>Cgnome</th> <th>Ani</th> <th>Data</th> <th>Paese</th> </tr> <tr> <th>Nome2</th> <th>Cgnome2</th> <th>Ani2</th> <th>Data2</th> <th>Paese2</th> </tr> </thead> <tbody> <tr> <th>data1 row1</th> <th>data2 row1</th> <th>data3 row1</th> <th>data4 row1</th> <th>data5 row1</th> </tr> <tr> <th>data1 row2</th> <th>data2 row2</th> <th>data3 row2</th> <th>data4 row2</th> <th>data5 row2</th> </tr> </tbody> </table> </div>

Answer 2

您可以通过添加行回调 function 来解决此问题：

简单有效的方法：

在DataTable 定义中添加此 function ：

        rowCallback: function(row, data, index) {
            $(row).unbind('click');
            $(row).bind('click', () => {
              yourClickFunction(data);
            });
        }

像这样：

                    .
                    .
                    .


         columnDefs: [
                {
                    render: $.fn.dataTable.render.text(),
                    targets: 0
                },
                {
                    render: $.fn.dataTable.render.text(),
                    targets: 1
                },
                {
                    render: $.fn.dataTable.render.text(),
                    targets: 2
                },
                {
                    render: $.fn.dataTable.render.text(),
                    targets: 3
                },
                {
                    render: $.fn.dataTable.render.text(),
                    targets: 4
                },
            ],
            rowCallback: function(row, data, index) {
            $(row).unbind('click');
            $(row).bind('click', () => {
              yourClickFunction(data);
            });
        }
                    .
                    .
                    .

这个 function 在你的Js 文件中，它将向你显示什么数据。

        function yourClickFunction(rowData) {
          console.log("YourClickData:", rowData);
        }

DataTable 官方网站帮助在这里