2014-01-24 8 views
5

В столбце данных нет автоматического изменения размера. Вот мой кодАвтоматическое изменение размера столбцов datatable

 var oTable =$('#test').dataTable({ 
       "bJQueryUI": true, 
       "aaData": aDataSet, 
       "sPaginationType": "full_numbers", 
       "oTableTools": { 
       "aButtons": [ {"sExtends": "csv" , "sButtonText": "Save as CSV"}], 
       "sSwfPath": "js/jquery/copy_csv_xls.swf" 
       }, 
       "bAutoWidth" : true, 
       "sDom": '<"H"lCf>t"H"<"F"iTp>', 
       "aoColumnDefs": [ 
       { "bVisible": true, "aTargets": [ 11 ] } 
       ], 
       "aoColumns": [ 
        { "sTitle": "column1" }, 
        { "sTitle": "column1" }, 
        { "sTitle": "column1" }, 
        { "sTitle": "column1"}, 
        { "sTitle": "column1"}, 
        { "sTitle": "column1" }, 
        { "sTitle": "column1" }, 
        { "sTitle": "column1" }, 
        { "sTitle": "column1"}, 
        { "sTitle": "column1 By"}, 
        { "sTitle": "column1 Date"} 
       ] 
      }); 
      oTable.fnAdjustColumnSizing(); 
     }); 

Я хочу, чтобы все столбцы для автоматического изменения размера по крайней мере на основе тир значения заголовка

ответ

10

Вы просто сделать это, как если бы это был «нормальный» <table>:

th, td { 
    white-space: nowrap; 
} 

см. fidle ->http://jsfiddle.net/YrWG5/ с небольшим длинным заголовком/контентом.

0

Поместите этот код после инициализации таблицы данных:

oTable.find('thead th').css('width', 'auto'); 
1

Вы можете также использовать функцию Fluid column width DataTable в. Это поможет автоматическое изменение размера и добавить свиток, как на оси X и Y вы должны иметь несколько столбцов для отображения

$(document).ready(function() { 
    var table = $('#example').DataTable({ 
     scrollY:  "300px", 
     scrollX:  true, 
     scrollCollapse: true, 
     paging:   false, 
     columnDefs: [ 
      { width: '20%', targets: 0 } 
     ], 
     fixedColumns: true 
    }); 
}); 

расставшись с HERE

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