Отображение дочерней строки при изменении источника данных

Question

использует: -DataTables 1.10.12; ASP.NET;

Поздравления!

Этот инструмент замечательный! Я наслаждаюсь этим с тех пор, как нашел его.

У меня возникли некоторые трудности с Child Rows. Pls. Направьте меня на это. Цените, если кто-нибудь может поделиться своими решениями.

Моя проблема: ребенок строки отображения на изменяющиеся наборы данных:

Я получаю ошибки

CTX [0] .aoData [это [0]] не определено

, когда я попытался получить дочернюю строку после изменения источника данных. Новый источник данных берется после нажатия кнопки путем передачи параметров. Первоначальная загрузка данных не вызывает никаких проблем, но последующая загрузка данных дает ошибку. Ошибка передается как только отладчик попадает в следующий код:

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, поэтому селектор не будет определен.