jQuery Datatables.net 可折叠可扩展行 - 传递参数答案

【问题标题】：jQuery Datatables.net Collapsible expandible rows - Passing parametersjQuery Datatables.net 可折叠可扩展行 - 传递参数
【发布时间】：2016-05-04 12:31:00
【问题描述】：

我正在尝试使用类似于此处的代码的可扩展和可折叠行来实现数据表：

https://datatables.net/examples/api/row_details.html

我已经获得了展开和折叠行的代码，但是当单击 details.control 图标时，我在将展开的行的值传递给我的函数时遇到了困难。例如。单击展开图标（详细信息控件）后，我试图展开该行并使用通过依赖于某些父行数据的 ajax 请求获得的数据填充它。所以一些父行数据需要传递给我的 ajax 调用。如何获取所述行数据。我的代码如下：

$('#myTable').on('click', 'td.details-control', function () {
   var tr = $(this).closest('tr');
   var row = oTable.row(tr);
// need to get row data here somehow
   var rowId = ?????

   if (row.child.isShown()) {
       // This row is already open - close it
       row.child.hide();
       tr.removeClass('shown');
   } else {
       // Open this row
       format(row.child,rowid);
       tr.addClass('shown');
   }
 });


  function format(callback, id) {
   $.ajax({
       url: "@Url.Action("foo", "bar")/"+ id,
       dataType: "json",
       complete: function (response) {
           var data = JSON.parse(response.responseText);
           var thead = '', tbody = '';
           for (var key in data[0]) {
               //thead += '<th>' + key + '</th>';
           }

           $.each(data, function (i, d) {
               for (var x = 0; x < d.length ; x++)
               {
                   tbody += '<tr><td style="width:290px">' + d[x].Description + '</td><td style="width:210px">' + d[x].BalanceBroughtForward + '</td><td style="width:100px">' + d[x].Payments + '</td><td style="width:100px">' +
                 '</td></tr>';

               }
           });
           callback($('<table>' + thead + tbody + '</table>')).show();
       },
       error: function () {
           $('#output').html('Bummer: there was an error!');
       }
   });

【问题讨论】：

首先在行 ID 附近放置一个断点，然后检查你在控制台中要到达的行......

标签： jquery datatables-1.10

【解决方案1】：

在阅读了 datatables api 文档并通过反复试验后，我设法通过使用以下方法使其正常工作：

  $('#myTable').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = oTable.row(tr);
        var rowdata = (oTable.row(tr).data());
        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        } else {
            console.log( oTable.row(tr).data());
            // Open this row
            format(row.child, oTable.row(tr).data());
            tr.addClass('shown');
        }
    });

欢迎任何更好、更优雅的解决方案。干杯。

【讨论】：