it-roy-ru.com

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

У меня есть следующая 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

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

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

Спасибо

35
thiag0

Я согласился на ограничение (для некоторых людей преимуществом) того, что в моих строках будет только одна строка текста. 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). Любые столбцы без явной ширины получают равномерное распределение оставшегося пространства.

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

38
Greg Pettit

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

.td-limit {
    max-width: 70px;
    text-overflow: Ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
15
Mukesh Salaria

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

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

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

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

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

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

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

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

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

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

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

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

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

3
JustinP8

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

<div class = "table-responsive"> </ div>
2
César Augusto

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

1
ScottS

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

0
Ryan

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

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

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

0
user1281146