数据表嵌套表基于父表获取子表的行

如何解决数据表嵌套表基于父表获取子表的行

我已经建立了嵌套的数据表，其中包含一个父表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",columns: [
      {
         className: 'details-control',orderable: false,data: null,defaultContent: ''
      },{ data: "id" },{ data: "date" },{ data: "reason" }
    ],} );
  $('#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');
      }
  } );
} );

解决方法

出于完整性考虑，我终于在DataTables论坛上通过一些指针和大量测试解决了该问题。我知道我需要将ID从MAINtable发送到adjlinestable，并且绝对无法弄清楚。问题的一部分是DataTables自动为每一行-Row_＃生成一个ID。因此，如果您将其发送到您的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,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');
       
      }
      
  } );
             

          
} );