2015-03-05 2 views
1

Я работаю с библиотекой DataTables, и я использую опцию autoWidth, чтобы автоматически установить ширины столбцов таблицы данных, а также Scroller plugin, чтобы исправить заголовки и данные страницы с сервера.Отображать столбцы DataTables с естественной шириной

Эта комбинация выглядит красивой, когда моя таблица имеет большое количество столбцов, но когда она имеет всего несколько столбцов, параметр autoWidth делает их мультяшными большими.

Вот пример:

http://live.datatables.net/rizuvaza/2/edit

large columns

То, что я хотел бы для таблицы, чтобы быть только так широко, как необходимо для его содержания, а не шире. Иногда это будет означать, что содержимое слишком велико для окна просмотра и должно быть горизонтально прокручено, а иногда это будет означать, что контент уже, чем область просмотра, и в этом случае я не хочу, чтобы он потреблял все горизонтальное пространство.

Я нашел несколько подходов, которые работают, если я желаю жестко закодировать максимальную ширину для таблицы, но при этом полагается на то, что я пишу код для оценки ширины столбцов. Очевидно, что это зависит от большого количества сложных измерений (размер шрифта, ширина содержимого и т. Д.), Которые я действительно предпочел бы оставить в DataTables.

Есть ли способ настроить DataTables или использовать обертывающие элементы DOM и стили, чтобы он всегда рисовал таблицу, используя только ширину, необходимую?

+0

Столы хотят идти полной ширины, поэтому нет, не совсем. единственным способом было бы определить размер самостоятельно. вы могли бы вычислить максимальную ширину, а затем применить это самостоятельно, поэтому не нужно было бы на 100% вручную ... – dandavis

ответ

3

Ну - не знаю, если это вы ищете, - но если вы установите

#example { 
    display: block; 
} 

и запустить columns().adjust() сразу после инициализации

var table = $('#example') 
    .DataTable() 
    .columns() 
    .adjust() 
    .draw(); 

то столбцы будут термоусаживаемые к абсолютный минимальный размер.
демо ->http://jsfiddle.net/j5h9ob12/1/


Update, отредактированные названия в скрипку, чтобы подчеркнуть точку.

+0

Спасибо, «display: block» был волшебным соусом, в котором я нуждался! – Jonathan