如何截断数据表中的字段数据并在末尾添加 <更多选项> 以查看整个字段数据？

Posted 2023-05-09

【中文标题】如何截断数据表中的字段数据并在末尾添加 <更多选项> 以查看整个字段数据？

【英文标题】：how to truncate a field data in datatable and add <more options> towards the end to view the entire field data?

【发布时间】：2021-07-28 01:32:42

【问题描述】：

我正在使用数据表在我的应用程序中显示报告。 一些列有大量数据，我想截断视图并在末尾添加一个可点击选项，以便用户可以点击它来查看通话的全部内容。

我尝试使用省略号渲染来使用子字符串转换数据，但这不是一个可行的解决方案，因为我的表中也有下载选项。如果我使用渲染器，下载的报告也会显示截断格式。

请建议我如何实现这一点，因为该表也具有下载功能？ https://jsfiddle.net/jwrmgbnc/3/

以下是相同的示例代码：

$(document).ready(function() 
 $("#TableName").Datatable( 
    language:  "search": "Filter",
    paging: false,
    info: true,
    scrollY:'50px',
    scrollCollapse: true,
    scrollX: false,
    
   );
);

【参考方案1】：

处理此问题的一种方法是：

创建一个额外的“描述”列，其中包含与原始“描述”列相同的数据。

隐藏这个额外的列。

对原始（可见）“描述”列应用截断。

自定义 Excel 导出按钮，使其跳过原始的“描述”列（及其可能被截断的数据），仅导出隐藏的列。

示例数据行：

<tr>
    <td>NumberYYYYYY</td>
    <td>S3 </td>
    <td>Description again is very very very very very very long. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
    <td>Description again is very very very very very very long. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
    <td>Firewall Operations</td>
    <td>Assignee2</td>
    <td>Impact2</td>
</tr>

为方便起见，我将使用 DataTables ellipsis renderer 进行文本截断 - 但如果不适合您，您可以使用任何您喜欢的方式：

<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.24/dataRender/ellipsis.js"></script>

在这种方法中，您可以通过将鼠标悬停在被截断的文本上来将字段的全文视为工具提示。如果这不合适，请参阅下面的最后一节。

那么，DataTable的定义就变成了这样：

$(document).ready(function() 

  $('#TableName').DataTable( 
    dom: 'Brftip',
    columnDefs: [
       
        targets: [2], 
        render: $.fn.dataTable.render.ellipsis( 40 )
      ,
       
        targets: [3],
        visible: false 
      
    ],
    buttons: [
       
        extend: 'excelhtml5', 
        text: 'To Excel',
        exportOptions: 
          columns: [0, 1, 3, 4, 5, 6]
        
      
    ]
   );

 );

较长的文本将显示在 DataTable 中，截断为 40 个字符。

Excel 导出器将跳过可见的“描述”列：columns: [0, 1, 3, 4, 5, 6]

---

增强显示效果

您可以增强上述解决方案以提供一个“更多”按钮，单击该按钮将显示全文而不是截断的文本。

按钮的样式看起来像一个链接，以减少干扰：

.more-button 
  background: none!important;
  border: none;
  padding: 0!important;
  /*optional*/
  font-family: arial, sans-serif;
  /*input has OS specific font-family*/
  color: #069;
  text-decoration: underline;
  cursor: pointer;

列索引 2 的渲染函数随后更改如下：

 
  targets: [2], 
  render: function ( data, type, row, meta ) 
    if (type === 'display') 
      if ( data.length > 40)  
        return '<span>' + data.substr( 0, 38 ) + '... </span>' +
            '<button class="more-button" onclick="showMore(this, ' + meta.row + ')">more</button>' ;
       else 
        return data;
      
     else 
      return data;
    
  
,

showMore() 函数：

function showMore(node, rowId) 
  var rowData = $('#TableName').DataTable().rows( rowId ).data().toArray()[0];
  var fullText = rowData[3];
  $( node.parentNode ).text( fullText );

这是一个相当基本的功能 - 除非刷新表格，否则无法重新隐藏文本。

【讨论】：

感谢您分享这个快速解决方案，因为我是 javascript 和 jquery 的新手。

这工作正常，但使用 showmore 功能。当我单击显示更多按钮时，列文本似乎与下一列数据重叠而不是换行。