2016-12-02 2 views
0

Я использую datatables с запросом данных ajax (формат json) и загрузкой динамических столбцов. Это мой фактический код:Datatables: все столбцы максимальный размер

var tableData; 
var tableName='#iuprTable'; 

$(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 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 iuprTable = $(tableName).DataTable({ 
       scrollCollapse: true, 
       scrollX:  true, 
       scrollY:  '60vh', 
       paging:   false, 
       "data": tableData.data, 
       "columns": tableData.columns, 
       fixedColumns: { 
        leftColumns: 4 
       }, 
       "initComplete": function(settings){ 
        //TOOLTIP cell 
        $(tableName+ ' tbody td').each(function (k, cellObj){ 
         this.setAttribute('title', cellObj.innerText); 
         this.setAttribute('data-toggle', "tooltip"); 
        }); 
        $('[data-toggle="tooltip"]').tooltip({ 
         container: 'body' 
        }); 
        //add timeout because otherwise user could see a too fast waiting modal 
        setTimeout(function(){ 
         waitingModal.hidePleaseWait(); 
        }, 1000);  
       } 
      }); 
     } 
     else { 
      iuprTable.ajax.url("table/"+document.getElementById("hiddenIdCar").value).load(); 
     } 
    }); 
}); 

function notifyMessage(textMessage, typeMessage){ 
    $.bootstrapGrowl(textMessage, { 
     type: typeMessage, // (null, 'info', 'error', 'success') 
    }); 
} 

Чтобы вырезать текст ячейки и применить подсказки Я использовал этот CSS:

<style> 
#rdiTable td { 
    white-space: nowrap; 
    text-overflow:ellipsis; 
    overflow: hidden; 
    max-width:1px; 
} 
/*Change the size here*/ 
.tooltip-inner { 
    max-width: 550px; 
} 
.tooltip 
{ 
    word-wrap: break-word; 
} 
</style> 

Я не знаю, почему, но некоторые столбцы вырезать текст и другие являются более 1000px, как показано ниже: enter image description here Я пробовал whit max-width, с «columnDefs», с HTML и CSS, но у меня всегда есть эта проблема. Знаете ли вы, что может быть проблемой? Спасибо

ответ

0

Попробуйте fixed table layout.

table { 
    table-layout: fixed; 
} 
+0

Без изменений, я думаю, что это что-то о ячейках или столбцах, но странно, что только некоторые столбцы дают мне эту проблему. – luca

Смежные вопросы