Решение для 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/