Datatables/JQuery/Javascript - 研究摘要和 "Open" 按钮在同一个 TD 中，单词 "Open" 被添加到导出的导出

Question

我正在使用 Jquery 和数据表为客户创建资助研究项目的数据集。现在一切正常，除了嵌入到我的按钮中的单词“打开”也包含在导出中。问题是用户不希望在打开网页时默认显示研究摘要，但他们希望能够以模式打开它或导出他们的结果并在那里看到它。可能有 200 个项目添加到其中，每个摘要有大约 1,000 个字符，因此，我试图让它默认不可见。我可以让摘要出现在模式中，我可以让它出现在导出的 PDF/XLSX/CSV 文件中，但是我在输出中得到了摘要 +“打开”。我明白为什么会这样——我在同一个数据单元格中有摘要和按钮，但我不知道还有什么方法可以让它发挥作用。感谢任何帮助。

底线：我不希望按钮中的“打开”一词与导出输出中的研究摘要字段连接在一起。

这是我的代码笔：https://codepen.io/tenebris_silentio/pen/eYZmPQE

<!DOCTYPE html>
<html lang="en">

<script>
$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',

        buttons: [
            {
                extend: 'copyHtml5',
                exportOptions: {
                    columns: [ 0, ':visible' ]
                }
            },
            {
                extend: 'excelHtml5',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'csvHtml5',
                exportOptions: {
                    columns: ':visible'
                }
            },


            {
                extend: 'pdfHtml5',
                orientation: 'landscape',
                exportOptions: {
                    columns: ':visible'
                }
            },

            'colvis'
        ]
    } );
} );
</script>



<table id="example" class="display">
  <thead>
    <tr>
      <th class="all" data-toggle="tooltip" title="The known name of the project." >Project Name</th>
      <th class="all" data-toggle="tooltip" title="The provided unique ID that distinguishes projects.">Project Number</th>
      <th class="all" data-toggle="tooltip" title="The conclusing time point of a project, which is sometimes, but not always the point at which funding ends.">End Date</th>
      <th class="all" data-toggle="tooltip" title="The primary funder of the project.">Funder</th>
      <th class="all" data-toggle="tooltip" title="The principal investigator(s) or person responsible for the project.">PI</th>
      <th style="all">Source</th>
      <th style="all">Keywords</th>
      <th style="all" data-toggle="tooltip" title="A list of project descriptors.">Tags</th>
      <th style="all">Clinical Setting</th>
      <th style="all">Project URL</th>
      <th class="all" data-toggle="tooltip" title="A brief description on the scope and aims of a project.">Abstract</th>

    </tr>
  </thead>
  <tbody>
    <tr>

        <td>Measuring Patient Handling and Mobility Experiences</td>

        <td>NIH 17423424</td>

        <td>1/1/2016</td>

        <td>National Institutes of Health</td>

        <td>John Smith, Ph.D</td>

       <td>National Institutes of Health</td>

       <td>Mobility, Distance, Measurement</td>

       <td>digital</td>

       <td>primary care</td>

       <td><a href="https://www.testwebsite.com">Abstract Page</a></td>

        <td><div id="ex1"class="modal">
  <p>
  <b>Abstract<p></b>                    Background: Safe Patient Handling and Mobility (SPHM) consists of ergonomic techniques and equipment to move patients who cannot move independently. SPHM helps minimize adverse events (pressure ulcers, falls), and staff injuries. Despite benefits, we know little about how patients experience assisted mobility. With valid and reliable scales, we can measure patient experiences, thus facilitating improved care, more tailored evaluation, and more targeted clinical staff education. Patients in rehabilitation are an ideal group to study.
  <b></p>
  <a href="#" rel="modal:close"></a>
  </div>
  <p><a href="#ex1" rel="modal:open"><button class="button"><span>Open</span></button></a></p></td>

  </tbody>
</table>

Answer 1

在每个 exportOptions 部分（每个按钮一个）中，您可以添加一个选项来处理此问题 - 例如：

exportOptions: {
  columns: ':visible',
  format: {
    body: function ( data, row, column, node ) {
      var text = node.textContent;
      return column === 10 ? text.replace( /Open$/, '' ).trim() : data;
    }
  }
}

这是如何工作的：

对于每一行数据，如果列索引为 10（第 11 个可见列），则 format.body 函数将使用 node.textContent.

从该节点提取文本

然后最后不需要的“打开”文本将被删除 - 任何剩余的尾随空格都将被删除。

对于所有其他列，单元格的数据将原样传递。

请参阅 exportData 文档 here，以供参考。

Datatables/JQuery/Javascript - 研究摘要和 "Open" 按钮在同一个 TD 中，单词 "Open" 被添加到导出的导出

Datatables/JQuery/Javascript - Research Abstract and "Open" Button in same TD, word "Open" being added to exported export

html

javascript

jquery

datatables

bootstrap-modal