Решение для Ellipsis - Jquery + Bootstrap + Datatables

Question

Я использую Datatables на сайте с начальной загрузкой и jquery для большой (более 2000 записей) таблицы. Некоторые из (текстовых) значений слишком длинные, и на данный момент я использую что-то вроде этого:

render: function ( data, type, row ) {
                        return data.length > 35 ?
                        data.substr( 0, 35 ) +'…' :
                            data;
                    }

в Datatables вырезать строки и отображать полное значение в заголовке html. Есть лучший способ сделать это? Как плагин, который автоматически вырезает, но показывает все при нажатии или что-то подобное? Я не смог что-то найти.

Я видел jquery dotdotdot, но он не дал мне щелчка, чтобы продолжить.

Answer 1

Модификация строк в javascript для того, чтобы сделать их более видимыми или "подогнанными" к определенным элементам DOM, - это полный запрет. Особенно, когда вы, как здесь, имеете много строк, которые предварительно обрабатываются в обратном вызове.

Если вы используете фиксированную ширину для некоторых (или всех) столбцов, например:

table.dataTable td:nth-child(3) {
  max-width: 100px;
}

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

table.dataTable td  {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

демо -> http://jsfiddle.net/ax1gr1og/