Javascript 数据表限制单元格中显示的字符数

Question

我正在用Javascript创建一个DataTable，它具有以下属性：

var dtable = $('.ssdatatable').DataTable({
    "lengthMenu": [[10, 25, 50, 100, 500], [10, 25, 50, 100, 500]],
    "bProcessing": true,
    "sDom": "TBflrtip",
    "bServerSide": true,
    "sAjaxSource": ajSource,
    "iDisplayLength": 25,
    "bJqueryUI": false,
    "bAutoWidth": false,
    //"bAutoLength": false,
    //"bLengthChange": false,
    "recordsFiltered": 0,
    "sPaginationType": "full_numbers",
    "bPaginate": true,
    "sServerMethod": "POST",
    "responsive": true,
    "fixedHeader": true,
    "buttons": [
            'copy', 'excel', 'pdf'
    ],
    "aoColumns": [
        //columns
    ]
});

其中一个特定的列是描述，其中包含大量文本。列的宽度是固定的，但是正因为如此，我的行的高度不成比例，使页面 x10 达到其预期大小。

我的问题是：我可以在属性中添加任何内容以使其仅显示 N 个字符，并且通过达到限制，它将如下所示：

|text textte...|
|     Show More|      

（我尝试注释掉选项，确实对我有任何好处）

或者我需要使用一些方法或修改 css？

Answer 1

有同样的问题 - 只有我想在导出表格时显示所有文本，因此只在显示时限制文本。因此，基于此博客 https://datatables.net/blog/2016-02-26，我进一步开发了代码，以便在导出表时显示整个文本。

为此，我更改了代码，因此不会删除 50 个字符>文本，而是包装在一个范围中，然后从 CSS 中隐藏。

函数代码如下所示：

function(data, type, row) {
        if (type === 'display' && data != null) {
          data = data.replace(/<(?:.|\n)*?>/gm, '');

  if(data.length > 50) {
        return '<span class="show-ellipsis">' + data.substr(0, 50) + '</span><span class="no-show">' + data.substr(50) + '</span>';
      } else {
        return data;
      }
    } else {
      return data;
    }
  }

然后，您可以从 CSS 文件中添加：

span.no-show{
    display: none;
}
span.show-ellipsis:after{
    content: "...";
}

Answer 2

给定数据：

var mydt = [{ a: 1, b: 2, c: 3, d: 4 }, { a: 5, b: 6, c: 7, d: 8 }, { a: 10, b: 12, c: 13, d: 14 }];

                    $("#tbl2").DataTable({
                        columnDefs: [{ targets:[0] }],
                        data: mydt, columns: [{ data: "a" }, { data: "b" }, { data: "c" }, { data: "d" }],
                        createdRow: function (row, data, c, d) {
                         // so for each row, I am pulling out the 2nd td
                         // and adding a title attribute from the 
                        // data object associated with the row.

                            $(row).children(":nth-child(2)").attr("title", data.b)

                        },

                  and the rest

这是 jfiddle 中的一个工作 https://jsfiddle.net/bindrid/wbpn7z57/7/请注意，这个数据具有不同格式的数据，但它有效（在名字列上）

Answer 3

//DataTable 创建了 createRow 钩子，以允许在创建行 html 后对其进行更新。

-- 行是正在创建的当前行-- 数据是与行关联的数据对象。

createdRow: function (row, data, c, d) {

  $(row) gets the tr in a jQuery object
  $(row).children() gets all of the td's in the row
 (":nth-child(2)") gets the 2nd td in the row. Note, this is 1 based value,not 0 based.
  .attr is the jquery command that adds the "title" attribute to the td.
  the "title" is missed name but too late now.
   data.b matches the data structured used to populate the table.
   The actual structure of this data structure is dependent on your data source   so you would actually have to check it.

希望这对:)有所帮助

Answer 4

在下面的示例代码块中：

"Target"： 2 表示列索引，而 "data"："description" 表示要操作的列名。当我们查看渲染函数时，描述列的长度限制为 100 个字符。

var dtable = $('.ssdatatable').DataTable({
    "lengthMenu": [[10, 25, 50, 100, 500], [10, 25, 50, 100, 500]],
    "bProcessing": true,
    "sDom": "TBflrtip",
    "bServerSide": true,
    "sAjaxSource": ajSource,
    "iDisplayLength": 25,
    "bJqueryUI": false,
    .....
    {
        "targets": 2,
        "data":"description",
        render: function(data, type, row, meta) {
           if (type === 'display') {
             data = typeof data === 'string' && data.length > 100 ? data.substring(0, 100) + '...' : data;
           }
            return data;
        }
    },
});