Javascript Datatable limit amount of characters shown in a cell

Question

I am creating a DataTable in Javascript, which has the following properties:

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

One of the particular columns is a Description, which has a LOT of text in it. The width of columns is fixed, however because of that, the height of my rows are blowing out of proportions, making page x10 of its intended size.

My question is: is there anything I can add inside the properties to make it show only N characters, and by hitting limit it would be something like:

|text textte...|
|     Show More|      

(I tried commented out options, did do me any good)

Or would I need to use some method or modify css?

Answer 1

given data:

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

here is a working one in jfiddle https://jsfiddle.net/bindrid/wbpn7z57/7/ note that this one has data in a different format but it works (on the first name column)

Answer 2

Had the same problem - only I wanted to show all the text when the table is exported and thus only limit the text, when displayed. So based on this blog https://datatables.net/blog/2016-02-26, I further developed the code in order to allow the whole text to be shown when the table is exported.

In order to do so, I altered the code so text > 50 char is not removed, but instead wrapped in a span which is then hidden from CSS.

The function code looks like this:

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

Then from the CSS file you can add:

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

Answer 3

// DataTable created the createRow hook to allow the row html to be updated after it was created.

-- row is the current row being created -- data is the data object associated with the row.

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.

Hope this helps :)

Answer 4

In the below example code block:

Whereas "Targets": 2 indicates column index, "data":"description" points out column name that wanted to be manipulated. When we look at the render function, description column is limited to 100 characters length.

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