在Javascript数据表中自动换行列数据 [英] Word wrap column data in Javascript datatable

问题描述

我有一个JS数据表，我们在其中输入客户信息，在某些情况下，某些客户参考是这样的

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&

这会破坏我的html表，并迫使一列不成比例地增长，因为它不包含空格，我在JS小提琴中设置了一个示例来说明此问题，有没有一种方法可以强制将该列放入是否与其他格式保持一致，还是将文本换行以使其适合该列?

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/

推荐答案

将autoWidth设置为false并定义您喜欢的column width:

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

然后，最重要-添加此CSS:

then, most important - add this CSS :

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

word-break是重要的部分，vertical-top是眼睛的:)

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

演示-> http://jsfiddle.net/qh63k1sg/

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

在您的小提琴中，上面的内容似乎不起作用，但这是因为您将每个字符串作为值添加到<select>中，结果最终变得更长.为了防止这种情况，请在插入长字符串作为<option>值之前先将其剪掉.您可以在末尾添加...:

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

您的小提琴叉-> http://jsfiddle.net/bdwd1ee7/

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

这篇关于在Javascript数据表中自动换行列数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！