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

我正在用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吗？

给定数据：

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中的一个工作模式。请注意，此模式具有不同格式的数据，但它可以工作（在“名字”列上）

给定数据：

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中的一个工作表。请注意，这一个有不同格式的数据，但它可以工作（在“名字”列上）

//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.

---

希望这有帮助：）

/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.

---

希望这有帮助：）

也有同样的问题-只是我想在导出表时显示所有文本，因此在显示时只限制文本。因此，基于这个博客，我进一步开发了代码，以便在导出表时显示整个文本

为了做到这一点，我修改了代码，使文本>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;
    }
  }

---

有同样的问题-只有我想在导出表时显示所有文本，因此在显示时只限制文本。因此，基于这个博客，我进一步开发了代码，以便在导出表时显示整个文本

为了做到这一点，我修改了代码，使文本>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;
    }
  }

---

我所做的是把第一个x字符放在单元格里，然后把整个东西放在一个工具提示里。我使用了一个工具提示插件，以确保它很容易阅读。我所做的是将第一个x字符放在单元格中，然后将整个内容放在工具提示中。我使用了一个工具提示插件，以确保它易于阅读。这是一个良好的开端，谢谢。但是有没有一种方法可以扩展文本的其余部分，用户是否愿意这样做？遗憾的是，没有一种简单的方法可以包含链接来扩展行高并显示文本的其余部分，但是您的建议是一个很好的方向。实际上是有的。使用qtip显示名称。可以从默认样式更改样式并使其更加明显。或者，您可以使用jquerymouse-enter和mouse-leave显示一个对话框，显示我在工作中使用的所有信息。我让它显示得比默认大小大得多，并与我的站点颜色匹配在另一种情况下，我们将它绑定到ajax，它返回并获得用户完整的辅助信息这是一个好的开始，谢谢。但是有没有一种方法可以扩展文本的其余部分，用户是否愿意这样做？遗憾的是，没有一种简单的方法可以包含链接来扩展行高并显示文本的其余部分，但是您的建议是一个很好的方向。实际上是有的。使用qtip显示名称。可以从默认样式更改样式并使其更加明显。或者，您可以使用jquerymouse-enter和mouse-leave显示一个对话框，显示我在工作中使用的所有信息。我让它显示得比默认大小大得多，并与我的站点颜色匹配在另一种情况下，我们将它绑定到ajax，它返回并获得用户完整的辅助信息谢谢，我将在创作我的作品时包含此信息。谢谢，我将在创作我的作品时包含此信息。这是一个完美的答案！工作起来很有魅力：）这就是完美的答案！工作就像一个符咒：）