Блог

Я хотел бы предложить своим посетителям возможность сортировать ячейки в таблицах на HTML-странице, сгенерированной из RST с помощью python-sphinx. Предположим, у меня есть такая таблица:

 .. list-table:: A fancy name table
   :header-rows: 1
   
   * - Family name
     - Given name
   * - Smith
     - Samuel
   * - Johnson
     - John
  

Это хорошо отображается и показывает имя в порядке ввода. Теперь я хотел бы сгенерировать вывод HTML и предложить пользователю возможность изменить порядок имен в алфавитном порядке. Существуют отдельные примеры и библиотеки для реализации этого, и я хотел бы знать, какое решение уже реализовано в Sphinx, если таковое имеется. Лучше всего было бы включить минимальное расширение и изменить свойство всех таблиц (или только ту, которую я хотел бы иметь возможность сортировать), чтобы включить эту функцию.

Не могли бы вы посоветовать расширение и рекомендации, как это сделать? Я бы предпочел сделать как можно меньше манипуляций с CSS и JS кодом / файлом самостоятельно.

Вдохновленный некоторыми уже предоставленными ответами, я создал следующее решение, которое использует таблицы данных. Я использую тему html ‘classic’, которая уже включает jquery (я не уверен насчет других шаблонов).

В conf.py добавление дополнительных файлов css и js:

 html_static_path = ['_static']

html_css_files = [
    'https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css',
]

html_js_files = [
    'https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js',
    'main.js',
]
  

Создайте файл _static/main.js и добавьте следующие строки (я решил использовать класс «datatable», чтобы явно включить эту функцию в таблице):

 $(document).ready( function () {
    $('table.datatable').DataTable();
} );
  

Теперь в вашем первом документе вы можете создать необычную таблицу:

 .. table::
   :class: datatable

   =====  =====  =======
   A      B      A and B
   =====  =====  =======
   False  False  False
   True   False  False
   False  True   False
   True   True   True
   =====  =====  =======
  

:class: datatable Добавляет класс к элементу таблицы, следовательно, к этой таблице применяется DataTable javascript.

Я делаю это постоянно. Пример

Возможно, это не лучший способ, но я вставляю обычную таблицу html в .. raw:: html и добавляю ссылку на JS в свой layout.html шаблон. Просмотрите исходный код, чтобы увидеть мой HTML-код.