Question

我正在尝试在数据表中显示多行子行。我无法弄清为什么查看数据时它返回未定义的原因。我什至尝试在初始化数据表之前移动该函数，但这并没有真正改变结果。这是一个MVC（asp）项目，下面显示的html是测试数据，但实际上我是从sql server中提取数据。下面是我的代码：

JS

var table = $('#E1, #E2, #E3').DataTable({
            initComplete: function () {
                this.api().columns('.select-filter').every(function () {
                    var column = this;
                    var select = $('<select><option value="">Show 
All</option></select>')
                        .appendTo(column.header())
                        .on('change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                        column
                            .search(val ? '^' + val + '$' : '', true, false)
                            .draw();
                    });
                column.data().unique().sort().each(function (d, j) {
                    var val = $('<div/>').html(d).text();
                    select.append('<option value="' + val + '">' + val + '</option>');
                });

            });

        },
        sort: false,
        scrollX: true,
        fixedColumns: {
            leftColumns: 2,
            heightMatch: 'auto'
        },
        fixedHeader: {
            headerOffset: 50
        },
        buttons: [
            'excel'
        ],
        deferRender: true,
        deferLoading: true,
        lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
    });

    $('#E1, #E2, #E3').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({
                'Key 1': tr.data('key-1'),
                'Key 2': tr.data('key-2'),
                'Key 3': tr.data('key-3'),
                'Key 4': tr.data('key-4'),
                'Key 5': tr.data('key-5')
            })).show();
            tr.addClass('shown');
        }
    });
    function format(data) {
        var html = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:600px;">';
        for (var key in data) {
            console.log(data[key]);
            html += '<tr>' +
                '<td>' + key + '</td>' +
                '<td>' + data[key] + '</td>' +
                '</tr>';
        }
        return html += '</table>';
    }

HTML

<thead>
    <tr>
        <th>Item 1</th>
        <th>Item 2</th>
        <th>Item 3</th>
        <th>Item 4</th>
    </tr>
</thead>
<tbody>
    <tr data-key-1="Value 1" data-key-2="Value 2" data-key-3="Value 3" data-key-4="Value 4" data-key-5="Value 5">
        <td class="details-control">data 1a</td>
        <td class="details-control">data 1b</td>
        <td class="details-control">data 1c</td>
        <td class="details-control">data 1d</td>
    </tr>
    <tr data-key-1="Value 1" data-key-2="Value 2" data-key-3="Value 3" data-key-4="Value 4" data-key-5="Value 5">
      <td class="details-control">data 2a</td>
        <td class="details-control">data 2b</td>
        <td class="details-control">data 2c</td>
        <td class="details-control">data 2d</td>
    </tr>
</tbody>

Answer 1

解决方法如下：

HTML

    <tr data-child-value1="data1" data-child-value2="data2" data-child-value3="data3">
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>

JS

 $('#example').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(tr.data('child-value1'), tr.data('child-value2'), tr.data('child-value3'))).show();
                    tr.addClass('shown');
                }
            });
            function format(value1,value2,value3) {
                var html = '<table cellpadding="5" cellspacing="0" border="0">';

                    html += '<tr>' +
                        '<td> D1</td>' +
                        '<td>' + value1+ '</td>' +
                        '</tr>' + '<tr>' +
                        '<td> D2</td>' +
                        '<td>' + value2+ '</td>' +
                        '</tr>' + '<tr>' +
                        '<td> D3 </td>' +
                        '<td>' + value3+ '</td>' +
                        '</tr>';

                return html += '</table>';
            }

数据表显示详细信息多行返回未定义

1 个答案: