2016-12-02 4 views
0

私はdatatablesをajaxデータリクエスト(json形式)と動的列の読み込みで使用しています。データ型:すべての列の最大サイズ

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 HTMLとCSSで「columnDefs」というwhit max-widthを試しましたが、私はいつもこの問題を抱えています。 何が問題なのか知っていますか?ありがとう

答えて

0

お試しくださいfixed table layout

+0

変更されていない、私はそれがセルや列については何かだと思っていますが、一部の列だけでこの問題が発生するのは奇妙です。 – luca

関連する問題