Search code examples
javascriptdatatabledatatables

Javascript Datatable limit amount of characters shown in a cell


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?


Solution

  • 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)