Проблемы с переполнением и тегами jQuery DataTable

Ответ 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;
}

[edit to add:] После использования моего собственного кода и изначального сбоя я узнал второе требование, которое могло бы помочь людям. Сама таблица должна иметь фиксированный макет, или ячейки будут просто продолжать расширять, чтобы разместить содержимое независимо от того, что. Если стили 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). Любые столбцы без явной ширины получают равномерное распределение оставшегося пространства.

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

Ответ 2

Для меня работает следующее объявление CSS:

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

Ответ 3

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

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

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

Затем добавьте некоторый css, как это:

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

Ответ 4

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

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

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

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

Ответ 5

Я столкнулся с той же проблемой обертывания текста, решил его, изменив класс класса css в DT_bootstrap.css. Я ввел последние два css-строки table-layout и word-break.

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

Ответ 6

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

Ответ 7

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

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

Ответ 8

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

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

Ответ 9

Вы можете просто использовать рендеринг и обернуть свой собственный div или span вокруг него. TD`s трудно поддаются стилю, когда речь заходит о max-width, max-height и т.д. Div и span легко..

Смотрите: https://datatables.net/examples/advanced_init/column_render.html

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