javascript - 为什么数据表子行显示重复记录？

Question

我有显示详细信息行的数据表。它第一次工作正常，但是当我点击第二个或第三个子行时，它会显示重复的行，我的意思是第一个子行中的行。

    $(document).ready(function() {

        var table = $('#example').DataTable( {
            "ajax": {
                    "url":"{{ route('admin.requestReport') }}",
                    "dataType":"json",
                    "type":"POST",
                    "data":{"_token":"{{ csrf_token() }}"}
            },
            "columns": [
                {
                    "className":      'details-control',
                    "orderable":      false,
                    "data":           null,
                    "defaultContent": ''
                },  
                { "data": "counter" },
                { "data": "start_date" }
            ],
            /* "order": [[1, 'asc']], */
            searching: false
        } );

        // Add event listener for opening and closing details
        $('#example tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = table.row( tr );

            if ( row.child.isShown() ) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child( format(row.data()) ).show();
                tr.addClass('shown');
            }
        } );
    } );

我确实console.log()找到了问题，但我需要指导来解决它。我发现的问题在这里

else {
    // Open this row
    row.child( format(row.data()) ).show();
    tr.addClass('shown');
}

我这样做console.log(row.data())也将先前单击的行传递给函数。

我想请您指导我如何将单行的 data() 传递给函数。我很感激。太感谢了。

标签： javascriptjquerydatatables