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

Posted 2023-05-09

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

【英文标题】：Datatable Jquery based plugin - table - issues with collapsible in table - Javascript/HTML

【发布时间】：2019-12-11 05:29:20

【问题描述】：

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

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

$(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>

【参考方案1】：

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

control classes

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

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

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>

【讨论】：

很好的答案！但是缺少一些细节。 1. 例如，标题中的最后一个th 必须有"class="none" 才能使此解决方案起作用。 2. 通过单击最后一列中的任意位置，将触发具有附加详细信息的列的可见性，而不仅仅是按钮。 3. 除最后一列外的所有列都强制使用class="all" 可见，这在小屏幕上可能不受欢迎。

@Gyrocode.com 抱歉解释不佳。现在我又加了一些词

【参考方案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>