JQuery DataTable переполнение и проблемы с переносом текста

Question

У меня есть следующая DataTable (полная ширина набора классов css ширина = 100%)

<table class="datatable full-width">
    <thead>
        <th>LOB</th>
        <th>Creditor Line 1</th>
        <th>Creditor Line 2</th>
        <th>Address</th>
        <th>City</th>
        <th>State</th>
        <th>Zip</th>
        <th></th>
    </thead>
    <tbody>
        ...
    </tbody>
</table>

Javascript:

var profileTable =
            $(".datatable").dataTable({
                "iDisplayLength": 25,
                "bDestroy": true,
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "bAutoWidth": false
            });

Все работает нормально, пока не появится запись сдлинная текстовая строка ... когда появляется запись с очень длинным текстом, таблица данных переполняется в правой части страницы.(См. Снимок экрана ниже, красная страница - это то место, где должна заканчиваться страница) http://i1109.photobucket.com/albums/h430/tbarbedo/overflow.jpg

Может кто-нибудь сказать мне, как обернуть текст в ячейках или предотвратить проблему переполнения?

Iпробовал через 'table-layout: fixed' ... это предотвращает переполнение, но устанавливает все столбцы одинаковой ширины.

Спасибо

Answer 1

Я согласился на ограничение (для некоторых людей преимуществом) того, что мои строки имеют только одну строку текста. CSS, содержащий длинные строки, становится:

.datatable td {
  overflow: hidden; /* this is what fixes the expansion */
  text-overflow: ellipsis; /* not supported in all browsers, but I accepted the tradeoff */
  white-space: nowrap;
}

[править, чтобы добавить:] После использования собственного кода и первоначального сбоя я понял второе требование, которое может помочь людям. Сама таблица должна иметь фиксированную компоновку, иначе ячейки будут просто пытаться расширяться, чтобы вместить содержимое, несмотря ни на что. Если стили DataTables или ваши собственные стили еще не сделали этого, вам нужно установить их:

table.someTableClass {
  table-layout: fixed
}

Теперь, когда текст обрезан с помощью эллипсов, чтобы фактически «увидеть» потенциально скрытый текст, вы можете реализовать плагин всплывающей подсказки или кнопку сведений или что-то еще. Но быстрое и грязное решение состоит в том, чтобы использовать JavaScript, чтобы заголовок каждой ячейки был идентичен ее содержимому. Я использовал jQuery, но вам не нужно:

  $('.datatable tbody td').each(function(index){
    $this = $(this);
    var titleVal = $this.text();
    if (typeof titleVal === "string" && titleVal !== '') {
      $this.attr('title', titleVal);
    }
  });

DataTables также предоставляет обратные вызовы на уровнях рендеринга строк и ячеек, поэтому вы можете предоставить логику для установки заголовков в этой точке вместо итератора jQuery.each. Но если у вас есть другие слушатели, которые изменяют текст в ячейке, вам может быть лучше нажать на них с jQuery.each в конце.

Весь этот метод усечения ТАКЖЕ будет иметь ограничение, которое вы указали, что вы не фанат: по умолчанию столбцы будут иметь одинаковую ширину. Я определяю столбцы, которые должны быть постоянно широкими или постоянно узкими, и явно устанавливаю для них ширину в процентах (вы можете сделать это в разметке или с помощью sWidth). Любые столбцы без явной ширины получают равномерное распределение оставшегося пространства.

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

Answer 2

У меня работает следующая декларация CSS:

.td-limit {
    max-width: 70px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

Answer 3

Вы можете попробовать установить word-wrap, однако он пока не работает во всех браузерах.

Другой способ - добавить элемент вокруг данных вашей ячейки, например:

<td><span>...</span></td>

Затем добавьте несколько CSS, как это:

.datatable td span{
    max-width: 400px;
    display: block;
    overflow: hidden;
}

Answer 4

Та же проблема, и я решил поставить таблицу между кодом

<div class = "table-responsive"> </ div>

Answer 5

Просто стиль CSS, использующий white-space:nowrap, работает очень хорошо, чтобы избежать переноса текста в ячейках. И, конечно же, вы можете использовать text-overflow:ellipsis и overflow:hidden для усечения текста с эффектом многоточия.

<td style="white-space:nowrap">Cell Value</td>

Answer 6

Я столкнулся с той же проблемой переноса текста, решил ее, изменив класс таблицы CSS в DT_bootstrap.css. Я представил последние две строки таблицы CSS и верстку слов.

   table.table {
    clear: both;
    margin-bottom: 6px !important;
    max-width: none !important;
    table-layout: fixed;
    word-break: break-all;
   } 

Answer 7

Я опаздываю, но после прочтения ответа @Greg Pettit и пары блогов или других вопросов SO, к сожалению, не могу вспомнить, я решил сделать пару плагинов dataTables, чтобы справиться с этим.

Я положил их на битбакет в репозитории Mercurial. Я последовал за плагином fnSetFilteringDelay и просто изменил комментарии и код внутри, так как я никогда не делал плагин для чего-либо раньше. Я сделал 2, и не стесняйтесь использовать их, вносить в них вклад или давать предложения.

• dataTables.TruncateCells - усекает каждую ячейку в столбце до заданного количества символов, заменяя последние 3 эллипсами и помещает полный предварительно усеченный текст в заголовок ячейки. приписаны.

• dataTables.BreakCellText - пытается вставить символ прерывания через каждые X, определенные пользователем, символы в каждой ячейке столбца. Существуют некоторые причуды, касающиеся ячеек, которые содержат пробелы и дефисы, вы можете получить странные результаты (например, пара символов, идущих после последнего вставленного символа
  ). Может быть, кто-то может сделать это более надежным, или вы можете просто поиграть с breakPos для столбца, чтобы он выглядел хорошо с вашими данными.

Answer 8

Попробуйте добавить td {word-wrap: break-word;} к css и посмотрите, исправит ли это.

Answer 9

Использование классов «отзывчивый nowrap» для элемента таблицы должно помочь.

Answer 10

Вы можете просто использовать рендер и обернуть свой собственный div или span вокруг него. ТД трудно стилизовать, когда дело доходит до макс. Ширины, макс. Высоты и т. Д. Простота деления и пролета проста.

См .: https://datatables.net/examples/advanced_init/column_render.html

Я думаю, что более приятное решение, чем работа с CSS-хакерами, которые не поддерживаются в разных браузерах.