Word wrap column data in Javascript datatable

Question

I have a JS datatable where we input customer information, on certain case some customer reference are as such

reference_text=%26reference%5Ftext%3D%2526reference%255Ftext%253Dtest%252520ipsum%25252C%25252008%25252DAug%25252D08%2546%26&

This breaks my html table and forces a column to grow out of proportion as this does not contain a space, i have setup a example in JS fiddle to illustrate this issue, is there a way we can force this column to be in a consistent format with the other or wrap the text to make it fit in the column?

$(document).ready(function () {
    if ($('#report_gen_user').length) {
        $('#report_gen_user').dataTable(
                {
                    "iDisplayLength": -1,
                    initComplete: function () {
                        var api = this.api();

                        api.columns().indexes().flatten().each(function (i) {
                            if (i == 2 ||  i == 9) {
                                var column = api.column(i);
                                var select = $('<select><option value=""></option></select>')
                                        .appendTo($(column.footer()).empty())
                                        .on('change', function () {

                                            var val = $.fn.dataTable.util.escapeRegex(
                                                    $(this).val()
                                                    );

                                            column
                                                    .search(val ? '^' + val + '$' : '', true, false)
                                                    .draw();
                                        });

                                column.data().unique().sort().each(function (d, j) {
                                    select.append('<option value="' + d + '">' + d + '</option>')
                                });

                                $(".hidefooter").html("");
                            }
                        });
                    },
                    "aLengthMenu": [
                        [15, 25, 35, 50, 100, -1],
                        [15, 25, 35, 50, 100, "All"]
                    ],
                    "aoColumnDefs": [{
                            "bVisible": false,
                            "aTargets": []
                        }],
                    "aaSorting": [],
                    "fnFooterCallback": function (nRow, aasData, iStart, iEnd, aiDisplay) {

                        var columnas = [1,  5]; //the columns you wish to add      
                        for (var j in columnas) {
                            var columnaActual = columnas[j];
                            var total = 0;
                            var allTimeTotal = 0;
                            for (var i = iStart; i < iEnd; i++) {
                                total = total + parseFloat(aasData[aiDisplay[i]][columnaActual]);
                            }
                            total = total.toFixed(2); 
                            for (var counter in aasData) {
                                 allTimeTotal = allTimeTotal + parseFloat(aasData[counter][columnaActual]);
                                //console.log((aasData[counter][columnaActual]));
                            }
                            allTimeTotal = allTimeTotal.toFixed(2); 
                            if (total == allTimeTotal) {
                                $($(nRow).children().get(columnaActual)).html(' '+total);
                            } else {
                                $($(nRow).children().get(columnaActual)).html(' '+total + ' (' + allTimeTotal + ')');
                            }

                        } // end 



                    }

                }

        );
    }
})

http://jsfiddle.net/63g6e655/3/

please read about the arrow antipattern :blog.codinghorror.com/flattening-arrow-code — AwokeKnowing
– AwokeKnowing, Commented Oct 22, 2015 at 7:28

davidkonrad · Accepted Answer · 2015-10-22 10:37:00Z

19

Set autoWidth to false and define your prefered column width's :

var table = $('#example').DataTable({
    autoWidth: false,
    columns : [
        { width : '50px' },
        { width : '50px' },
        { width : '50px' },
        { width : '50px' },        
        { width : '50px' },
        { width : '50px' }        
    ] 
});

then, most important - add this CSS :

table.dataTable tbody td {
    word-break: break-word;
    vertical-align: top;
}

word-break is the important part, vertical-top is for the eyes :)

demo -> http://jsfiddle.net/qh63k1sg/

In your fiddle the above seems not to work, but that is because you add each and every string as values to a <select> that ends up being even longer. To prevent that, cut long strings off before inserting them as <option> values; you can add ... to the end :

column.data().unique().sort().each(function (d, j) {
    if (d.length>25) { d=d.substring(0,25)+'...' }
    select.append('<option value="' + d + '">' + d + '</option>')
});

your fiddle forked -> http://jsfiddle.net/bdwd1ee7/

edited Oct 22, 2015 at 10:37

answered Oct 22, 2015 at 9:45

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

overlord Over a year ago

Using the ... breaks the filtering

overlord Over a year ago

column.data().unique().sort().each(function (d, j) { let t = d; if (d.length>25) { d=d.substring(0,25)+'...' } select.append('<option value="' + t + '">' + d + '</option>') });

overlord Over a year ago

To fix this, you need to set the option value to the full text, without the '...', and then you set the text component to the shortened version.

davidkonrad Over a year ago

Hey @overlord, you are free to improve the answer. That would be in the good old SO spirit. I will accept your corrections. Alternatively, you could write a new and better answer yourself.

davidkonrad Over a year ago

Besides that, I think your first comment only is about TypeScript and poorly implemented transpilers and minifiers.

|

Collectives™ on Stack Overflow

Word wrap column data in Javascript datatable

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related