在 html 输出中使用 rst 和 python-sphinx 对 table 进行排序

Question

我想为我的访问者提供一种可能性，即在使用 python-sphinx 从 RST 生成的 HTML 页面中对 table 中的单元格进行排序。假设我有一个像这样的 table：

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

这呈现得很好，并按照输入的顺序显示名称。现在我想生成一个 HTML 输出并为用户提供将名称重新排序为字母顺序的可能性。有 standalone examples 和库来实现这个，我想知道哪个解决方案已经在 Sphinx 中实现了（如果有的话）。最好的办法是包括一个最小的扩展并修改所有 table 的属性（或者只是我希望能够排序的那个）以包含此功能。

能否请您提供扩展建议和最佳做法？我宁愿自己做尽可能少的 CSS 和 JS code/file 操作。

Answer 1

我一直这样做。 Example

可能不是最好的方法，但我在.. raw:: html下插入一个常规的html table，并在JS中添加一个link我的 layout.html 模板。查看源代码以查看我的 html 代码。

Answer 2

受一些已经提供的答案的启发，我创建了以下使用数据表的解决方案。我正在使用 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 并添加以下行（我选择使用 class "datatable" 在 table):

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

在您的第一个文档中，您现在可以创建一个奇特的 table:

.. table::
   :class: datatable

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

:class: datatable 将 class 添加到 table 元素，因此 DataTable javascript 应用于此 table。

在 html 输出中使用 rst 和 python-sphinx 对 table 进行排序

Sorting table with rst and python-sphinx in html output

html

sorting

restructuredtext

python-sphinx