JQuery dataTable не показывает значок сортировки

Я пытаюсь использовать плагин jQuery dataTable. Проблема в том, что значок сортировки (эта стрелка, указывающая, в каком направлении данные фактически отсортированы) не отображается.

Мой код выглядит следующим образом:

$('#example').dataTable(
{
    "bPaginate": false,
    "bFilter": false,
    "oLanguage": { "sInfo": ""}        
}
);

и Html:

<table class="surfClass" cellspacing="1" id="example">

<thead>
<tr>
    <th width="120px">Name</th>
    <th width="120px">The hourly rate (points)</th>
    <th>Levels of referrals</th>
    <th>bonuses</th>
    <th width="70px">Payout minimum</th>
</tr>
</thead>

Ответы

Ответ 1

У меня была эта проблема, я обнаружил, что, скопировав CDN script на свой локальный компьютер, он больше не ссылался на изображения, как указал @Matt2012. Поэтому я решил обновить файл CSS, чтобы искать те изображения, в которые я хочу их поместить, после того как я их сохранил.

Смотрите эту часть:

table.dataTable thead .sorting { background: url('/Content/images/sort_both.png') no-repeat center right; }
table.dataTable thead .sorting_asc { background: url('/Content/images/sort_asc.png') no-repeat center right; }
table.dataTable thead .sorting_desc { background: url('/Content/images/sort_desc.png') no-repeat center right; }

table.dataTable thead .sorting_asc_disabled { background: url('/Content/images/sort_asc_disabled.png') no-repeat center right; }
table.dataTable thead .sorting_desc_disabled { background: url('/Content/images/sort_desc_disabled.png') no-repeat center right; }

Ответ 2

У меня была эта проблема, и мне потребовался час, чтобы обнаружить, что я не связываюсь с необходимой таблицей стилей. В моем случае у меня было:

<link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/minidatatables-bootstrap.css'}"/>

но мне также необходимо добавить:

<link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/datatables-bootstrap.css'}"/>

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

Ответ 3

Datatables использует спрайт для значков, которые вы хотите использовать firebug в firefox, нажимаете на сеть, а не все, и смотрите на что-либо, отображающееся красным цветом. Это означает, что актив не загружается. Вы ищете что-то вроде этого "/media/css/jui_themes/smoothness/images/ui-icons_888888_256x240.png".

Я предполагаю, что плагин datatable инициализируется, и вы видите все остальное, чего вы ожидаете?

Вы можете посмотреть http://debug.datatables.net/, который является букмарклетом, который помогает отлаживать этот плагин.

Ответ 4

У меня тоже была проблема. Просто используйте свой собственный конфигуратор для настройки всех параметров, которые вы хотите здесь, https://datatables.net/download/ они будут генерировать именно файлы .js и .css тебе нужно. Затем вы можете загрузить или использовать свой собственный размещенный CDN для обоих файлов.

Ответ 5

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

"bSort": true,

Ответ 6

Я исправил проблему, обернув текст заголовка таблицы в <div>:

<th><div>Date</div></th>