使用 datatables 展示表格

計算得出的中國城市飲用水中全氟辛烷磺酸（PFASs）的平均濃度（ng/L）

不同國家和美國各州發布的飲用水中 PFAS 準則

數據來源及完整論文請參閱：Per- and polyfluoroalkyl substances (PFASs) in Chinese drinking water: risk assessment and geographical distribution。Liu, L., Qu, Y., Huang, J. et al. Per- and polyfluoroalkyl substances (PFASs) in Chinese drinking water: risk assessment and geographical distribution. Environ Sci Eur 33, 6 (2021). https://doi.org/10.1186/s12302-020-00425-3

如何在 WordPress 中展示上面的數據圖表

這裏使用了開源的js插件 DataTables 來展示上面的圖表。安裝方法可以參考官方安裝文檔，非常簡單。考慮到文件裏推薦的 CDN 方法在中國可能水土不服，所以我使用本地的安裝方法。在下載頁面勾選需要的組件（我只選了必須的 css 和 js，由於 WordPress 已自帶 jquery，所以不用選jquery）然後下載到一個 zip 包。我是將其上傳到 WordPress 的 wp-content/uploads/share/js 目錄中，然後解壓並修改文件所有者爲nginx( chown nginx:nginx -R DataTables )，就可以使用了。文章裏用到的代碼如下：

<link rel="stylesheet" type="text/css" href="/wp-content/uploads/share/js/datatables.min.css"/>
<script type="text/javascript" src="/wp-content/uploads/share/js/datatables.min.js"></script>

<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>

<script>
jQuery(document).ready(function($) {
    $('#table_id').DataTable();
} );
</script>