Javascript数据表中的换行字列数据

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

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

这打破了我的html表格，并迫使一列增长超出比例，因为这不包含空格，我已经在JS fiddle中设置了一个示例来说明这个问题，有没有办法强制此列与另一列保持一致的格式，或者包装文本以使其适合列

$(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 



                    }

                }

        );
    }
})

$（文档）.ready（函数（）{
如果（$（'#报告_gen_user'）。长度）{
$（'#报告_gen_user'）。数据表(
{
“iDisplayLength”：-1，
initComplete:函数（）{
var api=this.api（）；
api.columns（）.index（）.flatte（）.each（函数（i）{
如果（i==2 | | i==9）{
var column=api.column（i）；
变量选择=$（“”）
.appendTo（$（column.footer（））.empty（））
.on（'change'，function（）{
var val=$.fn.dataTable.util.escapeRegex(
$（this.val（）
);
柱
.search（val？“^”+val+“$”：“”，true，false）
.draw（）；
});
column.data（）.unique（）.sort（）.each（函数（d，j）{
选择。追加（“”+d+“”）
});
$（“.hidefooter”）.html（“”）；
}
});
},
“阿伦哲努”：[
[15, 25, 35, 50, 100, -1],
[15,25,35,50,100，“全部”]
],
“aoColumnDefs”：[{
“可见”：假，
“目标”：[]
}],
“aaSorting”：[]，
“fnFooterCallback”：函数（nRow、aasData、iStart、iEnd、aiDisplay）{
var columnas=[1，5]；//要添加的列
for（列中的变量j）{
var columnaActual=columnas[j]；
var合计=0；
var-allTimeTotal=0；
for（var i=iStart；i

---

将

自动宽度设置为false，并定义首选
列的宽度：

var table=$（'#示例'）.DataTable({
自动宽度：false，
栏目：[
{宽度：'50px'}，
{宽度：'50px'}，
{宽度：'50px'}，
{宽度：'50px'}，
{宽度：'50px'}，
{宽度：'50px'}
] 
});

然后，最重要的是，添加以下CSS：

table.dataTable tbody td{
断字：断字；
垂直对齐：顶部；
}

断字
是重要的部分，
垂直顶部
是眼睛：）

演示->


在您的小提琴中，上述操作似乎不起作用，但这是因为您将每个字符串作为值添加到一个
中，该字符串最终会更长。为防止出现这种情况，在将长字符串作为
值插入之前将其切掉；您可以在末尾添加
…
：

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

column.data（）.unique（）.sort（）.each（函数d，j）{
如果（d.length>25）{d=d.substring（0,25）+''…'}
选择。追加（“”+d+“”）
});

您的小提琴分叉->
请阅读有关箭头反模式的内容：