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

Question

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

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

由于 table 也具有下载功能，请建议我如何实现此目的？ https://jsfiddle.net/jwrmgbnc/3/

下面是相同的示例代码：

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

Answer 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>

在这种方法中，您可以通过将鼠标悬停在截断的文本上来查看作为工具提示的字段的完整文本。如果不是 suitable，请参阅下面的最后一节。

那么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]

增强显示效果

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

按钮的样式看起来像 link，以减少干扰：

.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 );
}

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

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

how to truncate a field data in datatable and add <more options> towards the end to view the entire field data?

html

javascript

jquery

datatables