Удалить сортировку стрелок в jQuery DataTables

Ответ 1

Значки определяются как background : url(..) в классах CSS. Отключите их:

.sorting, .sorting_asc, .sorting_desc {
    background : none;
}

см. jsfiddle → http://jsfiddle.net/5V2Dx/ Примечание. Это решение предназначено для datatables 1.9.x!!

Обновление. При использовании datatables 1.10.x CSS для сброса значков заголовков немного отличается:

table.dataTable thead .sorting, 
table.dataTable thead .sorting_asc, 
table.dataTable thead .sorting_desc {
    background : none;
}

см. → http://jsfiddle.net/kqpv3ub9/ (обновленная демонстрация использует dataTables 1.10.11)

Ответ 2

Ни один из представленных решений не работал у меня. Но я только что нашел это;

.dataTable > thead > tr > th[class*="sort"]:after{
    content: "" !important;
}

PS.: Версия DataTables "datatables": "~1.10.2"

Ответ 3

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

"targets": 'no-sort',
"bSort": false,
"order": []

Ответ 4

Для новой версии DataTables:

<style>
     .dataTable > thead > tr > th[class*="sort"]::after{display: none}
</style>

Ответ 5

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

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    display: none;
}

Ответ 6

Быстрый трюк (это скроет кнопку сортировки, но функция все еще работает): - Создать CSS:

.no-sort::after { display: none!important; }

.no-sort { pointer-events: none!important; cursor: default!important; }

Ответ 7

Использование CSS:

.DataTables_sort_icon { display:none;}

Ответ 8

Это то, что сработало для меня

.dataTable > thead > tr > th[class*=sort]:after{
    display:none;
}

Ответ 9

Пример:

<display:column property="......" title="......" sortable="true"/>

Это приведет к сортировке столбца без отображения стрелки.

Ответ 10

Все это кажется немного сложным, почему бы не использовать атрибут data-sortable="false" в теге <th>, а затем просто сделать removeAttribute("class"); в JS с триггером click?

Ответ 11

В последней версии datatables/CDN он снова отличается

table.dataTable thead .sorting:after
{
    display: none;
}

Скрывает фильтры.

Привет

Ответ 12

(Поскольку DataTables 1.10) Если вам это не нужно, отключить упорядочение является одним из способов предотвращения появления элементов управления стрелками. Сделайте это на инициализации таблицы, указав опцию "порядок заказа как false.

Пример:

$("#example").DataTable({
   "ordering": false
});

JSFiddle

Документация:

Включение или отключение упорядочения столбцов - это так просто!

Предостережение: нет сортировки вообще.

Другой вариант - отключить упорядочение по всем столбцам. Затем вы можете программно установить порядок с помощью стрелок управления, отображаемых только в отсортированных столбцах (столбцах):

var after = $('#after').DataTable({
  "order": [[1,"asc"]],                       // sorting 2nd column
  "columnDefs": [
    { "orderable": false, "targets": "_all" } // Applies the option to all columns
  ]
});

JSFiddle

Ответ 13

Для DataTables 1.10.7 небольшой вариант для davidkonrad css style:

table.dataTable thead th.sorting, 
table.dataTable thead th.sorting_asc, 
table.dataTable thead th.sorting_desc {
    background : none;
}

Включить элемент "th".

Ответ 14

Это позволит вам изменить значки сортировки по умолчанию для пользовательских значков, которые я получил из сообщения Irshad выше и сообщения Suschil из здесь. Должно было сделать это из-за того, что браузеры с отключением шрифтов отключены, что было вне нашего контроля.

.dataTable > thead > tr > th[class*="sort"]::after{display: none}

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-list.png') no-repeat center right; }
table.tabledataTable thead .sorting_desc { background: url('/Content/images/sort-desc-list.png') no-repeat center right; }

Ответ 15

В моем случае это работало нормально.

.sorting:after,
.sorting_asc:after,
.sorting_desc:after{
    content: "";
    background: none !important;
}

Ответ 16

Это сработало для меня.

 #sample_1>thead>tr>th.sorting, #sample_1>thead>tr>th.sorting_asc, #sample_1>thead>tr>th.sorting_desc {
        background : none;

    }
    #sample_1>thead>tr>th.sorting:after, #sample_1>thead>tr>th.sorting_asc:after, #sample_1>thead>tr>th.sorting_desc::after {
        content: none; 
    }

Ответ 17

В классах CSS sorting_asc и sorting_desc отображается значок.

Самое простое решение для локализации исправления для конкретной таблицы - после инициализации таблицы в файле fnInitComplete сделать следующее:

$(TABLE).find("thead th").removeClass("sorting_asc");

Ответ 18

$('#sample_1 thead tr th:first-child').removeClass('sorting');

Ответ 19

Поместите ниже CSS. Он будет скрывать только значок, однако сортировка будет работать.

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
  background-image: none!important;
}

Ответ 20

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

table.dataTable thead .sorting::after {
    opacity: 0.2;
    content: "";
}

Ответ 21

Вы также можете удалить изображения значков (вместо добавления нового CSS), в папке:

DataTables-1.10.16\images

Ответ 22

Есть другое решение, чтобы скрыть значки сортировки из столбца. Применить класс css к заголовку, скажем,

<th class="sorting_disabled"></th>

и определить класс CSS в стиле

.sorting_disabled
{
   background-image:none !important;
}

Это решение сработало и протестировано для версии 1 с данными jquery. 10+