JQuery TableSorter: стрелки сортировки не отображаются

Я реализую сортировщик таблиц jQuery, но стрелки не отображаются.

Вот что я сделал до сих пор:

<script type="text/javascript" src="/path/to/jquery-latest.js"></script> 
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>

а также

$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
);

Таблица сортируется нормально, но стрелки не отображаются. Я что-то упустил?
Я даже добавил следующее, но это не сработало:

<LINK rel="StyleSheet" type="text/css" href="../tablesorter/themes/green/style.css">

jquery tablesorter
person GingerHead    schedule 01.08.2012    source источник
comment
Бьюсь об заклад, это таблица стилей, поставляемая с tablesorter, вы интегрировали ее, а также загрузили изображения на свой сервер и изменили ли вы путь к изображениям внутри css?   -  person Hipny    schedule 01.08.2012
comment
убедитесь, что изображения .png находятся в той же папке, что и ваш CSS, иначе вам придется отредактировать URL-адрес внутри файла .css.   -  person wirey00    schedule 01.08.2012

Ответы (6)


arrow_upward
12
arrow_downward

У меня была такая же проблема при использовании сортировщика таблиц на этой странице - http://ajthomas.co.uk/fpl/< /а>. Однако это потому, что я пропустил добавление таблиц стилей и изображений, которые входят в загружаемый файл. Похоже, ты тоже.

person Alex    schedule 01.08.2012
comment
хммм... а в таблице стилей вы ссылаетесь на правильный идентификатор/класс таблицы? - person Alex; 01.08.2012
comment
в таблице стилей в ссылках и таблице с классом «.tablesorter», есть ли в вашей таблице этот класс? - person Alex; 01.08.2012
comment
Ссылка ajthomas возвращает 404. - person Be Kind To New Users; 15.07.2017

arrow_upward
6
arrow_downward

Если вы каскадируете их таблицу стилей, она будет выглядеть точно так же, как на сайте TableSorter. Вам даже не нужно перемещать его из их пакета. Просто добавьте эту строку после объявления таблицы стилей:

<link href="[YOUR PATH TO]/tablesorter/themes/blue/style.css" rel="stylesheet" type="text/css" />
person elgati    schedule 16.04.2013

arrow_upward
2
arrow_downward

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

Первым было добавить файл css. Я переместил tablesorter-blue.css в каталог с остальными стилями, а затем импортировал его со следующим тегом.

<link rel="stylesheet" href="/styles/tablesorter-blue.css">

Часть, которую пропустили другие ответы, заключалась в том, чтобы указать стиль при определении таблицы.

<script>$(function() {$('#table_to_sort').tablesorter({"theme": "blue"});});</script>

Когда вы просмотрите файлы tablesorter-*.css, вы увидите, что стили определены с такими именами, как tablesorter-blue или tablesorter-green. Указав тему, он добавляет имя темы к 'tablesorter-', чтобы вы могли включить все темы и применить разные темы к разным таблицам.

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

person Robert Rapplean    schedule 02.12.2019

arrow_upward
1
arrow_downward

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

У меня был включен стиль для моей темы (синий), и в стиле есть изображения для стрелок, закодированные в Base 64, поэтому он должен просто работать.

Простая проблема заключалась в том, что у меня не было класса tablesorter-blue в дополнение к tablesorter, поэтому он загружал тему по умолчанию.

person Jack Strosahl    schedule 24.06.2019

arrow_upward
0
arrow_downward

Если у кого-то все еще есть проблемы с tablesorter, не отображающим стрелки сортировки, вот небольшой трюк, который я использую при обратном вызове инициализации:

$("table.sort").tablesorter({
  theme : 'dropbox',
  cssIcon: 'tablesorter-icon',
  initialized : function(table){
    $(table).find('thead .tablesorter-header-inner').append('<i class="tablesorter-icon"></i>');
  }
});
person Taylor Foster    schedule 11.07.2017

arrow_upward
-2
arrow_downward

Вам нужно добавить класс tablesorter в вашу таблицу

person Arthur Veselov    schedule 16.10.2017