数据表嵌套表根据父表获取子表的行

Question

我已经设置了嵌套数据表，父表MAINtable 和子表adjlinesTable。几乎一切正常，除了我正在绘制从adjlinesTable 到MAINtable 中的每一行的所有行。对于MAINtable 中的每一行，我只希望adjlinesTable 包含MAINtable(id) = adjlinesTable(adjustmentid) 所在的记录。我一直在循环尝试不同的方法 3 天，但就是无法击败这个！这是我的脚本：

$(document).ready(function(){
function createChild ( row ){
var table = $('<table class="display" width="100%"/>');
 
    row.child( table ).show();
 
    var adjlinesTable = table.DataTable( {
    ajax: "php_pages/fetch_adjlines.php",
    pageLength: 5,
    columns: [
      { data: "id" },
      { data: "adjustmentid" },
      { data: "product" },
      { data: "quantity" }
    ],
    order: [[1, 'asc']],
    } );
}
var table = $('#MAINtable').DataTable( {
    ajax: "php_pages/fetch_adjustments.php",
    pageLength: 5,
    columns: [
      {
         className: 'details-control',
         orderable: false,
         data: null,
         defaultContent: ''
      },
      { data: "id" },
      { data: "date" },
      { data: "reason" }
    ],
    order: [[1, 'asc']],
  } );
  $('#MAINtable tbody').on('click', 'td.details-control', function () {
     var tr = $(this).closest('tr');
     var row = table.row( tr );
     var rowData = row.data();
 
     if ( row.child.isShown() ) {

       row.child.hide();
       tr.removeClass('shown');

       $('#' + rowData.id.replace(' ', '-')).DataTable().destroy();
     }
     else {
        createChild(row);
       tr.addClass('shown');
      }
  } );
} );

Answer 1

为了完整起见，我终于在 DataTables 论坛上通过一些指针和大量测试解决了这个问题。我知道我需要将 id 从MAINtable 发送到adjlinestable，但绝对想不通。部分问题在于 DataTables 会自动为每一行生成一个 id - Row_#。因此，如果您将其发送到您的 php 进行平局，那是完全没用的。我必须重写我的 php，以便将此 DT_RowId 设置为我的 id 而不是它们生成的 Row_#。有了它，下面的代码将 id 发送到我的 php 代码以生成子表。

请注意 - row.id ...它不是您表中的 id，而是 Datatable id，除非您更改它。

$(document).ready(function() {
        function createChild ( row ) {
            // This is the table we'll convert into a DataTable
            var table = $('<table class="display" width="100%" style="border: 1px solid black;"/>');
            
            // Display it the child row
            row.child( table ).show();

            // Initialise as a DataTable
            var adjlinesTable = table.DataTable( {
            ajax: {
                url: 'php_pages/fetch_adjlines.php',
                type: 'post',
                data: function ( d ) {
                    d.adjustmentid = row.id;
                }
            },
            columns: [
              { title: "Product", data: "product" },
              { title: "Quantity", data: "quantity" }
            ],
            order: [[0, 'asc']],
            dom: 
                "tr<'bottom'<'row'<'col-sm-12 col-md-6 col-lg-3'i><'col-sm-12 col-md-6 col-lg-3'l><'col-sm-12 col-md-12 col-lg-6'p>>>",         
            } );
        } 

  
  // Main table
  var table = $('#MAINtable').DataTable( {
    ajax: "php_pages/fetch_adjustments.php",
    columns: [
      {
         className: 'details-control',
         orderable: false,
         data: null,
         defaultContent: ''
      },
      { data: "date" },
      { data: "reason" }
    ],
    order: [[1, 'asc']],
    dom: 
        "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'p>>" +
        "<'row'<'col-sm-12'i>>",
    

    
    initComplete: function () {
        
        //Apply text search
        this.api().columns('.dt-filter-text').every(function () {
            var title = $(this.footer()).text();
            $(this.footer()).html('<input type="text" placeholder="Search '+title+'" />');
            var that = this;
            $('input',this.footer()).on('keyup change', function () {
                if (that.search() !== this.value) {
                    that
                        .search(this.value)
                        .draw();
                }
            });
        });
    }   
    
  } );
  
  
  // Add event listener for opening and closing first level childdetails
  $('#MAINtable 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
       destroyChild(row);
        tr.removeClass('shown');
        
        function destroyChild(row) {
            var table = $("table", row.child());
            table.detach();
            table.DataTable().destroy();
         
            // And then hide the row
            row.child.hide();
        }
     }
     else {
       // Open this row
        createChild(row);
       tr.addClass('shown');
       
      }
      
  } );
             

          
} );