时间戳

首页 > 解决方案 > 基于 Datatable Jquery 的插件 - 表格 - 表格中可折叠的问题 - Javascript/HTML

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

问题描述

我需要创建一个基于网络的资助表，重点关注可以按结果过滤和排序的护理访问。尽管我从未真正使用过 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>

标签： javascriptjqueryhtmlhtml-tabledatatables

解决方案

DataTable 这是一个使用响应式插件的演示

  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>

推荐阅读