JQuery Datatables用子行重新加载数据

Question

我正在尝试复制此处显示的功能：

JQuery Datatables - Child Rows

使用下面显示的代码可以完美地工作：

function format ( d ) {
// `d` is the original data object for the row
return '<table class="table table-bordered" cellpadding="5" cellspacing="0" border="1" style="padding-left:50px;">'+
    '<tr>'+
        '<td width="100px" style="padding:3px"><strong>Assigned To:</strong></td>'+
        '<td style="padding:3px">'+d.assignedto+'</td>'+
    '</tr>'+
    '<tr>'+
        '<td style="padding:3px"><strong>Area:</strong></td>'+
        '<td style="padding:3px">'+d.area+'</td>'+
    '</tr>'+
    '<tr>'+
        '<td style="padding:3px"><strong>Category:</strong></td>'+
        '<td style="padding:3px">'+d.category+'</td>'+
    '</tr>'+
    '<tr>'+
        '<td style="padding:3px"><strong>Notes:</strong></td>'+
        '<td style="padding:3px">'+d.notes+'</td>'+
    '</tr>'+
'</table>';
$(document).ready(function() {
$( "#btn-getorder" ).click( function(event) {
    var table = $('#tbl-l250-tickets').DataTable( {
        retrieve: true,
        "ajax": "ajax-get-last250tickets.php?cust-code="+$("#hid-cust-id").val(),
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "ticketid" },
            { "data": "orderno" },
            { "data": "issue" },
            { "data": "receiveddate" },
            { "data": "completeddate" },
            { "data": "notesshort" }
        ]
    } );

    // Add event listener for opening and closing details
    $('#tbl-l250-tickets 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');
        }
    } );
});

});

我遇到的问题是，如果输入了新的订单号，并且使用新数据重新生成了页面，则子行扩展将失败，并在“格式”函数中显示“d 未定义”。

单步执行代码后，在新表上调用格式化函数时，“行”变量看起来好像是空的。它适用于加载到页面中的第一个订单，但对于任何后续订单都失败。

我不明白为什么会这样。

我也尝试过使用以下方法显式销毁表：

if ( $.fn.dataTable.isDataTable( '#tbl-l250-tickets' ) ) {
        table = $('#tbl-l250-tickets').DataTable();
        table.destroy();
    };

在重新创建表之前，但这也没有帮助。

有什么想法吗？

Answer 1

每次用户点击#btn-getorder 时，您都会为td.details-control 附加事件处理程序。

先尝试分离处理程序：

// Detach event listener
$('#tbl-l250-tickets tbody').off('click', 'td.details-control');

// Add event listener for opening and closing details
$('#tbl-l250-tickets tbody').on('click', 'td.details-control', function () {
   // ... 
});

更好的解决方案是将事件处理程序移到#btn-getorder 的单击事件处理程序之外。

$(document).ready(function() {
   $( "#btn-getorder" ).click( function(event) {
      // ... 
   });

   // Add event listener for opening and closing details
   $('#tbl-l250-tickets tbody').on('click', 'td.details-control', function () {
      // ... 
   });
});