分類
网站

使用 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 ),就可以使用了。文章裏用到的代碼如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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>

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *