JQuery 数据表重新加载包含子行的数据

Question

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

使用下面显示的代码可以完美运行：

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');
        }
    } );
});

});

我遇到的问题是，如果输入新的订单号，并使用新数据重新生成页面，子行扩展将失败，'format' 函数中的 'd is undefined'。

通过代码，当在新的 table 上调用格式函数时，看起来 'row' 变量似乎是空的。它适用于加载到页面中的第一个订单，但对任何后续订单均无效。

我不明白为什么会这样。

我也试过用以下方法明确地破坏 table：

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

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

有什么想法吗？

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 () {
      // ... 
   });
});

JQuery 数据表重新加载包含子行的数据

JQuery Datatables reloading data with child rows

ajax

jquery

datatables