基于 Datatable Jquery 的插件 - 表格 - 表格中可折叠的问题 - Javascript/HTML

Question

我需要创建一个基于网络的资助表，重点关注可以按结果过滤和排序的护理访问。尽管我从未真正使用过 Javascript（很久以前使用过一点 HTML），但通过使用 Jquery DataTable 插件，我已经能够完成大部分目标。我想为我们的用户提供点击折叠按钮来查看摘要（通常是 1000 个字符）的选项，如果他们想查找更多详细信息。

我在 Stackoverflow 上已经有很长时间了，我知道它至少会进行一次尝试，而我也这样做了。可悲的是，我知道我走了。我很感谢这里的任何帮助，因为一旦我开始工作，我就完成了这个项目！

$(document).ready(function() {
  $('#example').DataTable();
});

<link rel="stylesheet" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js">
</script>

<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Project Name</th>
      <th>Project Number</th>
      <th>PI(s)</th>
      <th>End Date</th>
      <th>Organization</th>
      <th>Abstract</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Geographic Access to VHA Rehabilitation Services for OEF/OIF Veterans</td>
      <td>DHI 06-010</td>
      <td>Diane Cowper, Ph.D </td>
      <td>9/30/2007</td>
      <td>VA</td>
      <td> 
        <button type="button" class="btn btn-info" data- toggle="collapse" data-target="#example">Simple collapsible</button>
        <div id="demo" class="collapse">Abstract language example 2.</div>
      </
      </td>
    <tr>
      <td>Access to Specialty Dental Care - Racial Disparities</td>
      <td>R01-234i482</td>
      <td>John Summerton, MD</td>
      <td>1/1/2020</td>
      <td>AHRQ</td>
      <td>
        <button type="button" class="btn btn-info" data- toggle="collapse" data-target="#example">Simple collapsible</button>
        <div id="demo" class="collapse">Abstract language example 1.</div>
      </
      </td>
    </tr>
  </tbody>
</table>

Answer 1

这是一个使用 DataTable responsive 插件的演示

1. control classes

   • all - 始终显示
   • none - 不显示为列，而是显示在子行中
   • never - 从不显示
   • control - 用于列 responsive.details.type 选项。

   所以，标题中的最后一个th 必须有class="none"

2. responsive.details.target

   这可以是列索引或 jQuery 选择器之一

$(document).ready(function() {
  $('#example').DataTable({
    responsive: {
      details: {
        type: 'column',
        target: '.collapse'
      }
    },
    columnDefs: [{
      orderable: false,
      targets: 5
    }],
  });
});

<link href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css" rel="stylesheet" />
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js">
</script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>


<table id="example" class="display">
  <thead>
    <tr>
      <th class="all">Project Name</th>
      <th class="all">Project Number</th>
      <th class="all">PI(s)</th>
      <th class="all">End Date</th>
      <th class="all">Organization</th>
      <th class="all">Abstract</th>
      <th class="none"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Geographic Access to VHA Rehabilitation Services for OEF/OIF Veterans</td>
      <td>DHI 06-010</td>
      <td>Diane Cowper, Ph.D </td>
      <td>9/30/2007</td>
      <td>VA</td>
      <td>
        <button type="button" class="btn btn-info collapse" data-toggle="collapse" data-target="#example">Simple collapsible</button>
      </td>
      <td>Abstract language example 2.</td>
    </tr>
    <tr>
      <td>Access to Specialty Dental Care - Racial Disparities</td>
      <td>R01-234i482</td>
      <td>John Summerton, MD</td>
      <td>1/1/2020</td>
      <td>AHRQ</td>
      <td>
        <button type="button" class="btn btn-info collapse" data-toggle="collapse" data-target="#example">Simple collapsible</button>
      </td>
      <td>Abstract language example 1.</td>
    </tr>
  </tbody>
</table>

Answer 2

你可以使用jQuery来hide()和show()元素使用这些函数或者你可以使用toggle()

    $(document).ready(function() {
      $('#example').DataTable();
      $('#demo').toggle();
    });

    function myFunction(){
        $('#demo').toggle();
    }

    <link rel="stylesheet" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
    <script src="http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js">
    </script>

    <body>
        
    <table id="example" class="display" style="width:100%">
      <thead>
        <tr>
          <th>Project Name</th>
          <th>Project Number</th>
          <th>PI(s)</th>
          <th>End Date</th>
          <th>Organization</th>
          <th>Abstract</th>
        </tr>
      </thead>
      
      <tbody>
        <tr>
          <td>Geographic Access to VHA Rehabilitation Services for OEF/OIF Veterans</td>
          <td>DHI 06-010</td>
          <td>Diane Cowper, Ph.D </td>
          <td>9/30/2007</td>
          <td>VA</td>
          <td> 
            <button type="button" class="btn btn-info" data- toggle="collapse" data-target="#example" onclick="myFunction()">Simple collapsible</button>
            <div id="demo" class="collapse" >Abstract language example 2.</div>
          </td>
        </tr>
      </tbody>
    </table>

    </body>