javascript - 在更改数据源时显示子行

Question

使用:-DataTables 1.10.12； ASP.NET;

您好!

这个工具很棒!自从我发现它以来，我一直很享受。

我在使用子行时遇到了一些困难。请。指导我。如果有人可以分享他们的解决方案，我们将不胜感激。

我的问题:显示更改数据集的子行:

一直报错

ctx[0].aoData[this[0]] is undefined

当我在更改数据源后尝试获取子行时。通过传递参数单击按钮后获取新数据源。初始加载数据证明没有问题，但随后的数据加载会出现错误。一旦调试器命中以下代码，错误就会传递:

if (row.child.isShown()) {}

下面是我的全部代码:

function organization_GetAccountManagerDetailEarnings(purl, pstart, pend, pcontext, purl2) {

    var table;
    var existing_table = $('#accountManagerEarningsDataTable').dataTable();
    if (existing_table != undefined) {
        existing_table.fnClearTable();
        existing_table.fnDestroy();
    }

    table = $('#accountManagerEarningsDataTable').DataTable({
                        ajax: {
                            url: purl,
                            dataSrc: "",
                            data: function (d) {
                                d.from = pstart;
                                d.to = pend;
                                d.context = pcontext;
                            }
                        },
                        searching: false,
                        processing: true,
                        paging: false,
                        columnDefs:
                        [
                            {
                                className: "dt-right",
                                "targets": [2]
                            },
                            {
                                className: "dt-right",
                                "targets": [3]
                            },
                            {
                                className: "dt-right",
                                "targets": [4]
                            },
                            {
                                className: "dt-right",
                                "targets": [5]
                            },
                            {
                                className: "dt-right",
                                "targets": [6]
                            }
                        ],
                        columns: [
                            {
                                "className": 'details-control',
                                "orderable": false,
                                "data": null,
                                "defaultContent": ''
                            },
                            { "data": "AccountManagerName" },
                            { "data": "TradeCount" },
                            { "data": "SelfServiceTradeCount" },
                            { "data": "TotalDirectBrokerageValue" },
                            { "data": "TotalSelfServiceBrokerageValue" },
                            { "data": "TotalRetailBrokerageValue" }
                        ],
                        "order": [[4, 'desc']],
                        "footerCallback": function (row, data, start, end, display) {
                            var api = this.api(),
                            data;

                            // Remove the formatting to get integer data for summation
                            var intVal = function (i) {
                                return typeof i === 'string' ?
                                i.replace(/[\$,]/g, '') * 1 :
                                typeof i === 'number' ?
                                    i : 0;
                            };

                            // Total over all pages
                            total = api
                                .column(4)
                                .data()
                                .reduce(function (a, b) {
                                    return intVal(a) + intVal(b);
                                }, 0);

                            // Total over this page
                            pageTotal = api
                                .column(4, {
                                    page: 'current'
                                })
                                .data()
                                .reduce(function (a, b) {
                                    return intVal(a) + intVal(b);
                                }, 0);

                            // Update footer
                            $(api.column(4).footer()).html(
                                'LKR' + currencyFormat(pageTotal) + ' ( LKR' + currencyFormat(total) + ' total)');
                        }
    });

    $('#accountManagerEarningsDataTable tbody').on('click', 'td.details-control', function () {

        var tr = $(this).closest('tr');
        var row = table.row(tr);

        try {
            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                $('div#collapseAccountManagerEarningsBody').block({
                    message: '<label>Processing</label>',
                    css: { border: '3px solid #a00' }
                });

                // Open this row
                var arrForTable1 = [];
                var arrForTable2 = [];

                totalBrokerage = 0;
                totalRetailBrokerage = 0;
                totalSelfServiceBrokerage = 0;

                console.log('You selected: ' + row.data().AccountManagerID);



                //problems with asynchoronus call back
                var response = organization_GetAccountManagerDetailEarningsAccountData(row.data(), purl2, pcontext);

                if (response.success === "true") {
                    for (var i = 0; i < response.value.length; i++) {

                        for (var j = 0; j < response.value[i].Securities.length; j++) {

                            var itemRow2 = {};
                            itemRow2["Security ID"] = response.value[i].Securities[j].SecurityId;
                            itemRow2["Trades"] = response.value[i].Securities[j].Trades;
                            itemRow2["Buy Qty"] = response.value[i].Securities[j].BuyQuantity;
                            itemRow2["Sell Qty"] = response.value[i].Securities[j].SellQuantity;
                            itemRow2["Total Brkg"] = response.value[i].Securities[j].Effective_Brokerage;
                            itemRow2["Online Brkg"] = response.value[i].Securities[j].Online_Brokerage;
                            arrForTable2.push(itemRow2);

                            totalBrokerage = totalBrokerage + parseFloat(response.value[i].Securities[j].Effective_Brokerage);
                            totalSelfServiceBrokerage = totalSelfServiceBrokerage + parseFloat(response.value[i].Securities[j].Online_Brokerage);
                        }

                        totalBrokerage = Math.round(totalBrokerage * 100) / 100;
                        totalSelfServiceBrokerage = Math.round(totalSelfServiceBrokerage * 100) / 100;
                        totalRetailBrokerage = Math.round(totalRetailBrokerage * 100) / 100;

                        var itemRow1 = {};
                        itemRow1["Account ID"] = response.value[i].AccountId;
                        itemRow1["Account Name"] = response.value[i].AccountName;
                        itemRow1["..."] = '<div class="alert alert-info" role="alert">' + buildHtmlTable(arrForTable2, 'table2x' + j) + '<p>Total Brokerage ' + numberWithCommas(totalBrokerage) + '</p></div>';
                        arrForTable1.push(itemRow1);
                        arrForTable2 = [];

                        totalBrokerage = 0;
                        totalRetailBrokerage = 0;
                        totalSelfServiceBrokerage = 0;

                    }

                    htmlTable1 = buildHtmlTable(arrForTable1, 'table1x' + i);
                    //console.log("2. " + JSON.stringify(htmlTable1));
                    row.child(htmlTable1).show();
                    tr.addClass('shown');
                }
                else {
                    row.child('<table><tr><td>' + response.value[0].AccountId + '</td></tr></table>').show();
                    tr.addClass('shown');
                };

                $('div#collapseAccountManagerEarningsBody').unblock();
            }
        } catch (e) {

            console.log(e.message);
            $('div#collapseAccountManagerEarningsBody').unblock();
        }

    });
}

function organization_GetAccountManagerDetailEarningsAccountData(d, purl2, context) {

    var result = null;

    $.ajax({
        url: purl2,
        data: { "pAccountManagerId": d.AccountManagerID, "pFromDate": d.StartDate, "pToDate": d.EndDate, "pContext": context },
        dataType: 'json',
        contentType: 'application/json',
        async: false,
        cache: false,
        success: function (data) {
            result = data;
        }
    });



    return result;

}

HTML:

<div class="collapse" id="collapseAccountManagerEarnings">
    <div class="well">
        <div id="collapseAccountManagerEarningsBody">
            <!--<img src="~/Images/loading.gif" />-->
            <table id="accountManagerEarningsDataTable">
                <thead>
                    <tr>
                        <th></th>
                        <th>A/c Manager</th>
                        <th>Trades</th>
                        <th>Self Service Trades</th>
                        <th>Effective Brokerage</th>
                        <th>Self Service Brokerage</th>
                        <th>Retail Brokerage</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th style="text-align:right" colspan="5">Total:</th>
                        <th></th>
                    </tr>
                </tfoot>
                <tbody></tbody>
            </table>
        </div>

    </div>
</div>

Answer 1

我本来想把它写成评论，但我没有足够的声誉。所以……

在我看来，您的 jQuery 选择器 $('#accountManagerEarningsDataTable tbody')更改数据源后可能不存在。您是否 100% 确定表格是使用 <tbody> 呈现的？数据源更改时的元素？我注意到您的示例 HTML 没有 <tbody> #accountManagerEearningsDataTable 中的元素所以选择器将是未定义的。