数据表:具有相同大小的所有单元格切割值

时间:2016-11-24 14:12:11

标签: javascript jquery html css datatables

我正在使用datatables动态列。 这是代码:

var tableData;
var tableName='#rdiTable';
$(document).ready(function (){
    jQuery.ajax({
        type : "GET",
        url : "table/"+document.getElementById("hiddenIdCar").value,
        headers: {'Content-Type': 'application/json'},  
        beforeSend: function() {
            waitingModal.showPleaseWait();
        },
        success: function(data,status,xhr){
            //No exception occurred
            if(data.success){
                tableData = data.result;
                $.each(tableData.columns, function (k, colObj) {
                    var str = '<th style="width: 50px;" data-html="true" data-toggle="tooltip" title="<b>NAME</b>:'+ colObj.parName + '<br><b>DESCRIPTION</b>:' + colObj.description + '<br><b>NOTE</b>: ' + colObj.note + '"></i>' + colObj.parName + '</th>';
                    $(str).appendTo(tableName+'>thead>tr');
                });
            } else {
                waitingModal.hidePleaseWait();
                notifyMessage(data.result, 'error');
            }
        },
        error: function(xhr,status,e){
            window.location.href = "/500";
        }
    }).complete(function() {
            //initialize datatable
            if ( ! $.fn.DataTable.isDataTable( tableName ) ) {
                var rdiTable = $(tableName).DataTable({
                    scrollCollapse: true,
                    scrollX:        true,
                    scrollY:        '60vh',
                    paging:         false,
                    "data": tableData.data,
                    "columns": tableData.columns,
                    fixedColumns:   {
                        leftColumns: 4
                    },
                    "initComplete": function(settings){
                        $('[data-toggle="tooltip"]').tooltip({
                            container: 'body'
                        }); 
                        //add timeout because otherwise user could see a too fast waiting modal
                        setTimeout(function(){
                            waitingModal.hidePleaseWait();
                        }, 1000);       
                    }  
                });
            }
            else {
                rdiTable.ajax.url("table/"+document.getElementById("hiddenIdCar").value).load();
            }
    });     
});

并在HTML代码中:

<div class="box-body">
    <!--  Fleets table -->
    <table id="slTable" class="table table-bordered table-striped">
        <thead>
            <tr>
            </tr>
        </thead>
    </table>
</div>

问题是某些单元格的值太长而且表格会拉伸列或行。是否可以将所有单元格设置为相同的大小来减小值?我可以像在列上一样在单元格上添加弹出窗口。我只找到了columns.width,但是我的列数量很大且不可预测。也许我必须设置css值,但我怎么能把它们放进去?谢谢 这是json的一个例子(它有很多字段)

columns

row

其中一些细胞非常长,如1x0000000020300000000x000200003000200 ...... 我应该在'style="white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:1px;"'附近添加<td

更新:可能与

#slTable td {
   white-space: nowrap; 
   text-overflow:ellipsis; 
   overflow: hidden; 
   max-width:1px;
}
</style>

我已经解决了,我正在测试。

0 个答案:

没有答案