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

Question

Я пытаюсь использовать плагин 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>

Answer 1

У меня была эта проблема, я обнаружил, потому что я скопировал скрипт CDN на свой локальный компьютер, он больше не ссылался на изображения правильно, как указывал @ 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; }

Answer 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'}"/>

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

Answer 3

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

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

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

Answer 4

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

"bSort": true,

Answer 5

Если вы используете BundleConfig, добавьте следующую ссылку:

"~ / Content / DataTables / css / dataTables.bootstrap4.css",

Answer 6

Если вы используете Bootstrap V4, вы должны включить 2 дополнительных CSS:

<link href="/bower_components/font-awesome/css/font-awesome.css"  rel="stylesheet">
<link href="/bower_components/datatables.net-plugins/integration/font-awesome/dataTables.fontAwesome.css"  rel="stylesheet">

для получения дополнительной информации посетите эту ссылку

Answer 7

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

Answer 8

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

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

Answer 9

Я просто ОБНОВЛЕНО JQuery datatable , теперь отлично работает