数据表行组折叠

如何解决数据表行组折叠

我想选择单击“程序1”，“程序2”和“程序3”之类的组名，并且该组应展开/折叠。加载网站时，默认情况下，该组应折叠。

但是我的Javascript技能还不够:) 我从this线程中发现了this个示例，但是由于它是硬编码的，因此它几乎没有用。

你们中的某人会这么友善并在这里帮助我吗？如何在“自定义行组折叠/展开”的基本示例上实现上述功能？

这是我的表格目前的样子：

这是我的代码：

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<div class="header">
  <h1><strong>Deliverables</strong></h1>
</div>
<div class ="container">
<table id="myTable" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Program</th>
      <th>Deliverable</th>
      <th>To</th>
      <th>Date</th>
      <th>Approved</th>
      <th>Notes</th>
    </tr>
  </thead>
  <tfoot>
      <tr>
      <th>Program</th>
      <th>Deliverable</th>
      <th>To</th>
      <th>Date</th>
      <th>Approved</th>
      <th>Notes</th>
    </tr>
  </tfoot>
</table>
</div>
<style> //These are just CSS styling I chose to use.
div.container {
    min-width: 980px;
    margin: 0 auto;
}
.header {
  padding: 10px;
  text-align: center;
}
body {
    font: 90%/1.45em "Helvetica Neue",HelveticaNeue,Verdana,Arial,Helvetica,sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #fff;
}
</style>
<script>
function loadData() { //Initializing the AJAX Request function to load in the external list data from different subsites
    //create an array of urls to run through the ajax request instead of having to do multiple AJAX Requests
    var urls = ["url1","url2","url3"];
        
    for (i=0; i < urls.length; i++) { //for loop to run through the AJAX until all URLs have been reached
      $.ajax({
        url: urls[i],'headers': { 'Accept': 'application/json;odata=nometadata' },success: function (data) { // success function which will then execute "GETTING" the data to post it to a object array (data.value)
          data = data;
          var table = $('#myTable').DataTable();
          table.rows.add( data.value ).draw();
        }
      });
    } // missing bracket
}
$(document).ready(function() {
     
  $('#myTable').DataTable( {
    "columns": [
      { "data": "Program",visible: false },{ "data": "Deliverable" },{ "data": "To" },{ "data": "Date" },{ "data": "Approved" },{ "data": "Notes" }
    ],dom: 'Bfrtip',buttons: [
        'copy','csv','excel','pdf','print'
    ],rowGroup: {
            dataSrc: 'Program'
        }
  } );
     
 loadData();
     
} );
</script>

这是AJAX请求返回的JSON对象：

{
    "value": [{
        "Notes": "Example Notes\n","Approved": "Yes","Program": "AMMO","Date": "12/23/2018","To": "[e-mail]","Deliverable": "Monthly Status Report (MSR)"
    },{
        "Notes": "Example Notes\n","Date": "03/30/2020","Deliverable": "Meeting Minutes"
    },{
        "Notes": "Example Notes","Approved": "No","Date": "09/22/2022","Deliverable": "Monthly Status Report (MSR)"
    }]
}