JQuery DataTabels - тема пользовательского интерфейса JQuery, стрелки переносятся на TH

Question

Я использую таблицы данных с темой jquery ui, и для сортируемых столбцов некоторые из TH обертывают маленькие значки стрелок, используемые для сортировки этого столбца.

У меня отображается около 7 столбцов.Для TD, имеющих небольшой объем текста (который не шире, чем фактический текст TH), значок стрелки переносится на TH.Любые идеи о том, как сделать так, чтобы все теги TH не переносили текст?Я попытался добавить 'sClass: nowrap' в каждый столбец, а затем создать класс css nowrap, который использует пробел: nowrap, но который работает только на TD, а не на TH.

В принципе нужен способубедитесь, что минимальная ширина каждого столбца равна ширине содержимого TH (включая стрелки)

Answer 1

Добавьте этот CSS на свою страницу

<style type="text/css">
table.display thead th span.css_right {
  float: right;
}
</style>

Answer 2

Проблема с обертыванием из-за float справа от th: after. Я нашел решение, играя с позициями. Просто используйте этот CSS:

table.dataTable thead th {
    position: relative;
    padding-right: 20px;
}
table.dataTable thead th:after {
    position: absolute !important;
    right: 0px;
}

С отступом вправо я предотвращаю перекрытие, а при абсолютном положении стрелки могут располагаться с правой стороны.

Answer 3

У меня тоже есть эта проблема.После копания в коде основная причина заключается в том, что dataTables пересчитывает / повторно заполняет theads с помощью jQuery UI, он вставляет плавающий интервал в div, но также не переносит исходный текст с плавающим интервалом.Таким образом, код будет выглядеть следующим образом:

<th class="ui-state-default" style="width: 85px; ">
    <div class="DataTables_sort_wrapper">
        <!-- NEED FLOATED SPAN HERE-->Rate Package
        <span class="css_right ui-icon ui-icon-carat-2-n-s"></span>
    </div>
 </th>

На основе числа с плавающей запятой он оборачивается.Кажется, в этой комнате достаточно места, чтобы вместить и то, и другое.Я бы предложил одну из двух вещей:

1. Укажите min-width / max-width через классы в тегах th.
2. Отправьте заявку на исправление в datatables.net.У меня не было времени поиграться и слишком много копаться в коде.

Answer 4

Убедитесь, что на боковой стороне нет прокладок.Решил проблему для меня!

Answer 5

С этим у вас будут тяжелые времена, и я бы хотел оказаться ошибочным, чтобы исправить свое собственное приложение. И вот почему:

Поведение по умолчанию «Минимальная ширина» любого данного столбца является более узким из текста заголовка ИЛИ самого широкого слова в любом данном столбце. Вот пример для пояснения: представьте, что на данный момент стрелок нет - у вас есть столбец с заголовком «Имя», и ячейки в этом столбце имеют формат «имя [пробел], фамилия». Где-то в этом столбце одна из ячеек содержит «Консуэла Руис». Столбец может быть настолько узким, насколько требуется, чтобы содержать «Consuela», прежде чем он начнет компенсацию в соответствии со своими собственными алгоритмами.

Таким образом, чтобы стрелки были частью этого вычисления, они должны быть неплавающими промежутками, что усложняет расположение в правой части каждого TH.

Компромисс, который я закончил, заключался в следующем:

1. Разместите заголовки так, как вы хотите. Определите, какую ширину вам нужно дать (в процентах или пикселях), чтобы таблица была оптимизирована в соответствии с заголовками, а не с содержимым.

2. У элементов TD должны быть overflow: hidden и text-overflow многоточие.

3. В параметре fnDrawCallback DataTables (возможно, есть лучшее место для этого, вот что я выбрал), установите функцию, которая берет каждую ячейку таблицы и устанавливает ее содержимое в качестве заголовка ( тем самым позволяя родным подсказкам отображать усеченные столбцы при наведении курсора).