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

给出数据：

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 2

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

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

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 3

有同样的问题-只有我想在导出表时显示所有文本，因此仅在显示时限制文本。因此，基于这个博客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: "...";
}

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

3 个答案: