根据Javascript中的条件从数据表中提取所有行的最佳方法是什么

如何解决根据Javascript中的条件从数据表中提取所有行的最佳方法是什么

我目前正在制定一个共管公寓计划。此问题的目标是当在父表上单击一个公寓行时，所有月份（与该公寓相关）都必须显示在子表中。

点击/选择/取消选择工作正常，但我无法获得所有第十二个月。

这是我的实际表格布局（示例 1）：

这是我的实际表格布局（示例 2）：

我对 childTable 的代码是：

var childTable = $('#child').DataTable( {
    "pageLength": 12,ajax: {
      url: "ajax/query_pagquotas.PHP",// This is the URL to the server script for the child data
      dataSrc: function (data) {
        var selected = parentTable.row( { selected: true } );
        if ( selected.any() ) {
                var ID = selected.data().ID;
                for (var i=0; i < data.data.length; i++) {
                    var rows = data.data[i];
                    if (rows.ID === ID) {
                    return [rows];
                    }
                }   
        } else {
        return [];
        }
    }
    },columns: [
        { "data": "ID" },{ "data": "DATA" },{ "data": "MES" },{ "data": "VALOR" },{ "data": "MetoDO" },{ "data": "ESTADO" },{ "data": "OBS" }

    ]
    
} );

感谢大师的帮助

[已编辑]

升级！如果最后的条件没有使“取消选择”起作用...

这是我目前的完整代码：

$(document).ready(function() {
    var parentTable = $('#parent').DataTable( {
        ajax: "ajax/dbfraccoes.PHP","language": {
            "sSearchPlaceholder": "Apto ou Proprietário...","url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Portuguese.json",},"processing": true,"scrollY":        "200px","scrollCollapse": true,"paging":         false,pageLength: 5,select: {
            style: 'single'
        },columns: [
            { "data": "ID","searchable": false },{ "data": "APTO" },{ "data": "FRACCAO"},{ "data": "PROPRIETARIO" },{ "data": "VALOR_QUOTA","searchable": false,className: "cssValores"},{ "data": "OBS" }
        ]
    } );
  
  // tabela Child ------------------------------------------
          
    var childTable = $('#child').DataTable( {
           columnDefs: [{
           targets: 6,render: function(data,type,row,Meta){
              if(type === 'display' && data === 'EMITIDO'){
                 data = '<td style="text-align:center"><button type="button" class="btn btn-info btn-sm cssButton center" title="Emitido Aviso de Recibo a pagamento">EMITIDO</button></td>'+
                 '<div class="links">' +
                 '<a href="<?PHP echo WEB_URL;?>credit_debit/gest_quotas.PHP?spid='+row['pqid']+'#insert">Editar</a> ' +
                 '</div>';      
              }else if (type === 'display' && data === 'AGUARDA'){
                 data = '<td style="text-align:center"><button type="button" class="btn btn-warning btn-sm cssButton center" title="Limite de pagamento ultrapassado. Em período de tolerância.">AGUARDA</button></td>'+
                 '<div class="links">' +
                 '<a href="<?PHP echo WEB_URL;?>credit_debit/gest_quotas.PHP?spid='+
                 row['pqid']+'#insert">Editar</a> ' +
                 '</div>'; 
                  
              }  
               
              return data;
           }
        }],"paging": false,"searching": false,"language": {
        "zeroRecords": "<center>Clique na tabela acima,na linha do apartamento que pretende. <br/>Os dados da fracção/apartamento selecionado acima serão reflectidos nesta tabela</center>",ajax: {
          url: "ajax/query_pagquotas.PHP",dataSrc: function (data) {
            var selected = parentTable.row( { selected: true } );
            if ( selected.any() ) {
                var rows = []; // create an empty array
                var ID = selected.data().ID;
                for (var i=0; i < data.data.length; i++) {
                        var row = data.data[i];
                        if (row.ID === ID) {
                        rows.push(row);     
                        }
                }
            }
            
            return rows;
        },columns: [
            { "data": "pqid" },{ "data": "ID"},{ "data": "MES"},{ "data": "VALOR",{ "data": "OBS" }
    
        ]
        
    } );

// This will load the child table with the corresponding data
parentTable.on( 'select',function () {
    childTable.ajax.reload();
} );  

//clear the child table
parentTable.on( 'deselect',function () {
    childTable.ajax.reload();
} );  
} );

解决方法

调整现有代码的最简单方法是更改​​ dataSrc: function (data) {...} 中的逻辑。

目前，您只创建了一个包含一项的数组。

所以，你可以这样做：

dataSrc: function (data) {
  var selected = parentTable.row( { selected: true } );
  var rows = []; // create an empty array
  if ( selected.any() ) {
    var ID = selected.data().ID;
    for (var i=0; i < data.data.length; i++) {
      var row = data.data[i]; // change the variable name to "row"
      if (row.ID === ID) {
        rows.push(row); // add the new row to your array of rows
      }
    }
  }
  return rows; // return your array of rows
}

这里最重要的一行是：rows.push(row);，它是 JavaScript 在数组末尾添加新项的方式。

因此，现在在 dataSrc 函数的末尾，如果没有选择任何行，您将拥有一个空数组 []，或者您将拥有一个与您的 ID 匹配的行数组。>

这应该可以解决您当前的问题。

---

上述方法应该可行 - 但它涉及每次获取每个子行 - 然后过滤掉您不想显示的行。

您可以通过将所选行的 ID 作为子表的 ajax URL 的一部分提交来改进这一点。您可以将相关代码从其当前位置移动到 parentTable 的 on(select) 函数中：

  var selectedID = -1

  parentTable.on( 'select',function () { 
    var selected = parentTable.row( { selected: true } );
    if ( selected.any() ) {
      selectedID = selected.data().ID;
    }
    childTable.ajax.reload();
  } );

我不知道您是如何实现您的 ajax/query_pagquotas.php，所以我不确定将 selectedID 参数传递给它的最佳方式。

通常我会将它作为查询参数附加到您的 ajax 参数中：

data: 'id=' + selectedID

您可能已经知道如何自己做。

一旦您将 selectedID 传递给您的 PHP，您就可以使用它仅返回您想要显示的记录 - 您可以从您的子表中删除所有现有的 dataSrc: function (data) {...} 逻辑定义。