BiomedEngX/CircosHeatmap-aardio
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity
CircosHeatmap-aardio/dist/lib/r-library/knitr/doc/datatables.html

692 lines
17 KiB
HTML
Raw Permalink Normal View History

首次上传
2025-01-12 00:52:51 +08:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta name="generator" content="litedown 0.4">
<title>Display Tables with the JavaScript Library DataTables</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xiee/utils@1.13.44/css/prism-xcode.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xiee/utils@1.13.44/css/default.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
</head>
<body>
<div class="frontmatter">
<div class="title"><h1>Display Tables with the JavaScript Library DataTables</h1></div>
<div class="author"><h2>Yihui Xie</h2></div>
<div class="date"><h3>2024-11-06</h3></div>
</div>
<div class="body">
<!--
%\VignetteEngine{litedown::vignette}
%\VignetteIndexEntry{Display Tables with the JavaScript Library DataTables}
-->
<h2 id="sec:jquery-datatables">jQuery DataTables</h2>
<p>We can use the JavaScript library <a href="https://datatables.net"><strong>DataTables</strong></a> to generate enhanced tables in HTML. In the example below, we create a table for the <code>mtcars</code> data:</p>
<div id="mtcars-table">
<pre><code class="language-r">mtcars
</code></pre>
<table>
<thead>
<tr>
<th></th>
<th align="right">mpg</th>
<th align="right">cyl</th>
<th align="right">disp</th>
<th align="right">hp</th>
<th align="right">drat</th>
<th align="right">wt</th>
<th align="right">qsec</th>
<th align="right">vs</th>
<th align="right">am</th>
<th align="right">gear</th>
<th align="right">carb</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mazda RX4</td>
<td align="right">21.0</td>
<td align="right">6</td>
<td align="right">160.0</td>
<td align="right">110</td>
<td align="right">3.90</td>
<td align="right">2.620</td>
<td align="right">16.46</td>
<td align="right">0</td>
<td align="right">1</td>
<td align="right">4</td>
<td align="right">4</td>
</tr>
<tr>
<td>Mazda RX4 Wag</td>
<td align="right">21.0</td>
<td align="right">6</td>
<td align="right">160.0</td>
<td align="right">110</td>
<td align="right">3.90</td>
<td align="right">2.875</td>
<td align="right">17.02</td>
<td align="right">0</td>
<td align="right">1</td>
<td align="right">4</td>
<td align="right">4</td>
</tr>
<tr>
<td>Datsun 710</td>
<td align="right">22.8</td>
<td align="right">4</td>
<td align="right">108.0</td>
<td align="right">93</td>
<td align="right">3.85</td>
<td align="right">2.320</td>
<td align="right">18.61</td>
<td align="right">1</td>
<td align="right">1</td>
<td align="right">4</td>
<td align="right">1</td>
</tr>
<tr>
<td>Hornet 4 Drive</td>
<td align="right">21.4</td>
<td align="right">6</td>
<td align="right">258.0</td>
<td align="right">110</td>
<td align="right">3.08</td>
<td align="right">3.215</td>
<td align="right">19.44</td>
<td align="right">1</td>
<td align="right">0</td>
<td align="right">3</td>
<td align="right">1</td>
</tr>
<tr>
<td>Hornet Sportabout</td>
<td align="right">18.7</td>
<td align="right">8</td>
<td align="right">360.0</td>
<td align="right">175</td>
<td align="right">3.15</td>
<td align="right">3.440</td>
<td align="right">17.02</td>
<td align="right">0</td>
<td align="right">0</td>
<td align="right">3</td>
<td align="right">2</td>
</tr>
<tr>
<td>Valiant</td>
<td align="right">18.1</td>
<td align="right">6</td>
<td align="right">225.0</td>
<td align="right">105</td>
<td align="right">2.76</td>
<td align="right">3.460</td>
<td align="right">20.22</td>
<td align="right">1</td>
<td align="right">0</td>
<td align="right">3</td>
<td align="right">1</td>
</tr>
<tr>
<td>Duster 360</td>
<td align="right">14.3</td>
<td align="right">8</td>
<td align="right">360.0</td>
<td align="right">245</td>
<td align="right">3.21</td>
<td align="right">3.570</td>
<td align="right">15.84</td>
<td align="right">0</td>
<td align="right">0</td>
<td align="right">3</td>
<td align="right">4</td>
</tr>
<tr>
<td>Merc 240D</td>
<td align="right">24.4</td>
<td align="right">4</td>
<td align="right">146.7</td>
<td align="right">62</td>
<td align="right">3.69</td>
<td align="right">3.190</td>
<td align="right">20.00</td>
<td align="right">1</td>
<td align="right">0</td>
<td align="right">4</td>
<td align="right">2</td>
</tr>
<tr>
<td>Merc 230</td>
<td align="right">22.8</td>
<td align="right">4</td>
<td align="right">140.8</td>
<td align="right">95</td>
<td align="right">3.92</td>
<td align="right">3.150</td>
<td align="right">22.90</td>
<td align="right">1</td>
<td align="right">0</td>
<td align="right">4</td>
<td align="right">2</td>
</tr>
<tr>
<td>Merc 280</td>
<td align="right">19.2</td>
<td align="right">6</td>
<td align="right">167.6</td>
<td align="right">123</td>
<td align="right">3.92</td>
<td align="right">3.440</td>
<td align="right">18.30</td>
<td align="right">1</td>
<td align="right">0</td>
<td align="right">4</td>
<td align="right">4</td>
</tr>
<tr>
<td>Merc 280C</td>
<td align="right">17.8</td>
<td align="right">6</td>
<td align="right">167.6</td>
<td align="right">123</td>
<td align="right">3.92</td>
<td align="right">3.440</td>
<td align="right">18.90</td>
<td align="right">1</td>
<td align="right">0</td>
<td align="right">4</td>
<td align="right">4</td>
</tr>
<tr>
<td>Merc 450SE</td>
<td align="right">16.4</td>
<td align="right">8</td>
<td align="right">275.8</td>
<td align="right">180</td>
<td align="right">3.07</td>
<td align="right">4.070</td>
<td align="right">17.40</td>
<td align="right">0</td>
<td align="right">0</td>
<td align="right">3</td>
<td align="right">3</td>
</tr>
<tr>
<td>Merc 450SL</td>
<td align="right">17.3</td>
<td align="right">8</td>
<td align="right">275.8</td>
<td align="right">180</td>
<td align="right">3.07</td>
<td align="right">3.730</td>
<td align="right">17.60</td>
<td align="right">0</td>
<td align="right">0</td>
<td align="right">3</td>
<td align="right">3</td>
</tr>
<tr>
<td>Merc 450SLC</td>
<td align="right">15.2</td>
<td align="right">8</td>
<td align="right">275.8</td>
<td align="right">180</td>
<td align="right">3.07</td>
<td align="right">3.780</td>
<td align="right">18.00</td>
<td align="right">0</td>
<td align="right">0</td>
<td align="right">3</td>
<td align="right">3</td>
</tr>
<tr>
<td>Cadillac Fleetwood</td>
<td align="right">10.4</td>
<td align="right">8</td>
<td align="right">472.0</td>
<td align="right">205</td>
<td align="right">2.93</td>
<td align="right">5.250</td>
<td align="right">17.98</td>
<td align="right">0</td>
<td align="right">0</td>
<td align="right">3</td>
<td align="right">4</td>
</tr>
<tr>
<td>Lincoln Continental</td>
<td align="right">10.4</td>
<td align="right">8</td>
<td align="right">460.0</td>
<td align="right">215</td>
<td align="right">3.00</td>
<td align="right">5.424</td>
<td align="right">17.82</td>
<td align="right">0</td>
<td align="right">0</td>
<td align="right">3</td>
<td align="right">4</td>
</tr>
<tr>
<td>Chrysler Imperial</td>
<td align="right">14.7</td>
<td align="right">8</td>
<td align="right">440.0</td>
<td align="right">230</td>
<td align="right">3.23</td>
<td align="right">5.345</td>
<td align="right">17.42</td>
<td align="right">0</td>
<td align="right">0</td>
<td align="right">3</td>
<td align="right">4</td>
</tr>
<tr>
<td>Fiat 128</td>
<td align="right">32.4</td>
<td align="right">4</td>
<td align="right">78.7</td>
<td align="right">66</td>
<td align="right">4.08</td>
<td align="right">2.200</td>
<td align="right">19.47</td>
<td align="right">1</td>
<td align="right">1</td>
<td align="right">4</td>
<td align="right">1</td>
</tr>
<tr>
<td>Honda Civic</td>
<td align="right">30.4</td>
<td align="right">4</td>
<td align="right">75.7</td>
<td align="right">52</td>
<td align="right">4.93</td>
<td align="right">1.615</td>
<td align="right">18.52</td>
<td align="right">1</td>
<td align="right">1</td>
<td align="right">4</td>
<td align="right">2</td>
</tr>
<tr>
<td>Toyota Corolla</td>
<td align="right">33.9</td>
<td align="right">4</td>
<td align="right">71.1</td>
<td align="right">65</td>
<td align="right">4.22</td>
<td align="right">1.835</td>
<td align="right">19.90</td>
<td align="right">1</td>
<td align="right">1</td>
<td align="right">4</td>
<td align="right">1</td>
</tr>
<tr>
<td>Toyota Corona</td>
<td align="right">21.5</td>
<td align="right">4</td>
<td align="right">120.1</td>
<td align="right">97</td>
<td align="right">3.70</td>
<td align="right">2.465</td>
<td align="right">20.01</td>
<td align="right">1</td>
<td align="right">0</td>
<td align="right">3</td>
<td align="right">1</td>
</tr>
<tr>
<td>Dodge Challenger</td>
<td align="right">15.5</td>
<td align="right">8</td>
<td align="right">318.0</td>
<td align="right">150</td>
<td align="right">2.76</td>
<td align="right">3.520</td>
<td align="right">16.87</td>
<td align="right">0</td>
<td align="right">0</td>
<td align="right">3</td>
<td align="right">2</td>
</tr>
<tr>
<td>AMC Javelin</td>
<td align="right">15.2</td>
<td align="right">8</td>
<td align="right">304.0</td>
<td align="right">150</td>
<td align="right">3.15</td>
<td align="right">3.435</td>
<td align="right">17.30</td>
<td align="right">0</td>
<td align="right">0</td>
<td align="right">3</td>
<td align="right">2</td>
</tr>
<tr>
<td>Camaro Z28</td>
<td align="right">13.3</td>
<td align="right">8</td>
<td align="right">350.0</td>
<td align="right">245</td>
<td align="right">3.73</td>
<td align="right">3.840</td>
<td align="right">15.41</td>
<td align="right">0</td>
<td align="right">0</td>
<td align="right">3</td>
<td align="right">4</td>
</tr>
<tr>
<td>Pontiac Firebird</td>
<td align="right">19.2</td>
<td align="right">8</td>
<td align="right">400.0</td>
<td align="right">175</td>
<td align="right">3.08</td>
<td align="right">3.845</td>
<td align="right">17.05</td>
<td align="right">0</td>
<td align="right">0</td>
<td align="right">3</td>
<td align="right">2</td>
</tr>
<tr>
<td>Fiat X1-9</td>
<td align="right">27.3</td>
<td align="right">4</td>
<td align="right">79.0</td>
<td align="right">66</td>
<td align="right">4.08</td>
<td align="right">1.935</td>
<td align="right">18.90</td>
<td align="right">1</td>
<td align="right">1</td>
<td align="right">4</td>
<td align="right">1</td>
</tr>
<tr>
<td>Porsche 914-2</td>
<td align="right">26.0</td>
<td align="right">4</td>
<td align="right">120.3</td>
<td align="right">91</td>
<td align="right">4.43</td>
<td align="right">2.140</td>
<td align="right">16.70</td>
<td align="right">0</td>
<td align="right">1</td>
<td align="right">5</td>
<td align="right">2</td>
</tr>
<tr>
<td>Lotus Europa</td>
<td align="right">30.4</td>
<td align="right">4</td>
<td align="right">95.1</td>
<td align="right">113</td>
<td align="right">3.77</td>
<td align="right">1.513</td>
<td align="right">16.90</td>
<td align="right">1</td>
<td align="right">1</td>
<td align="right">5</td>
<td align="right">2</td>
</tr>
<tr>
<td>Ford Pantera L</td>
<td align="right">15.8</td>
<td align="right">8</td>
<td align="right">351.0</td>
<td align="right">264</td>
<td align="right">4.22</td>
<td align="right">3.170</td>
<td align="right">14.50</td>
<td align="right">0</td>
<td align="right">1</td>
<td align="right">5</td>
<td align="right">4</td>
</tr>
<tr>
<td>Ferrari Dino</td>
<td align="right">19.7</td>
<td align="right">6</td>
<td align="right">145.0</td>
<td align="right">175</td>
<td align="right">3.62</td>
<td align="right">2.770</td>
<td align="right">15.50</td>
<td align="right">0</td>
<td align="right">1</td>
<td align="right">5</td>
<td align="right">6</td>
</tr>
<tr>
<td>Maserati Bora</td>
<td align="right">15.0</td>
<td align="right">8</td>
<td align="right">301.0</td>
<td align="right">335</td>
<td align="right">3.54</td>
<td align="right">3.570</td>
<td align="right">14.60</td>
<td align="right">0</td>
<td align="right">1</td>
<td align="right">5</td>
<td align="right">8</td>
</tr>
<tr>
<td>Volvo 142E</td>
<td align="right">21.4</td>
<td align="right">4</td>
<td align="right">121.0</td>
<td align="right">109</td>
<td align="right">4.11</td>
<td align="right">2.780</td>
<td align="right">18.60</td>
<td align="right">1</td>
<td align="right">1</td>
<td align="right">4</td>
<td align="right">2</td>
</tr>
</tbody>
</table>
</div>
<p>Note we assigned an <code>id</code> to the table, and next we use the <strong>DataTables</strong> library to initialize the table and you will get an interactive table.</p>
<pre><code class="language-js">window.addEventListener('load', () =&gt; {
$('#mtcars-table &gt; table').DataTable();
});
</code></pre>
<script>
window.addEventListener('load', () => {
$('#mtcars-table > table').DataTable();
});
</script>
<p>By comparison, below is an ordinary table:</p>
<pre><code class="language-r">mtcars
</code></pre>
<table>
<thead>
<tr>
<th></th>
<th align="right">mpg</th>
<th align="right">cyl</th>
<th align="right">disp</th>
<th align="right">hp</th>
<th align="right">drat</th>
<th align="right">wt</th>
<th align="right">qsec</th>
<th align="right">vs</th>
<th align="right">am</th>
<th align="right">gear</th>
<th align="right">carb</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mazda RX4</td>
<td align="right">21.0</td>
<td align="right">6</td>
<td align="right">160.0</td>
<td align="right">110</td>
<td align="right">3.90</td>
<td align="right">2.620</td>
<td align="right">16.46</td>
<td align="right">0</td>
<td align="right">1</td>
<td align="right">4</td>
<td align="right">4</td>
</tr>
<tr>
<td>Mazda RX4 Wag</td>
<td align="right">21.0</td>
<td align="right">6</td>
<td align="right">160.0</td>
<td align="right">110</td>
<td align="right">3.90</td>
<td align="right">2.875</td>
<td align="right">17.02</td>
<td align="right">0</td>
<td align="right">1</td>
<td align="right">4</td>
<td align="right">4</td>
</tr>
<tr>
<td>Datsun 710</td>
<td align="right">22.8</td>
<td align="right">4</td>
<td align="right">108.0</td>
<td align="right">93</td>
<td align="right">3.85</td>
<td align="right">2.320</td>
<td align="right">18.61</td>
<td align="right">1</td>
<td align="right">1</td>
<td align="right">4</td>
<td align="right">1</td>
</tr>
<tr>
<td>Hornet 4 Drive</td>
<td align="right">21.4</td>
<td align="right">6</td>
<td align="right">258.0</td>
<td align="right">110</td>
<td align="right">3.08</td>
<td align="right">3.215</td>
<td align="right">19.44</td>
<td align="right">1</td>
<td align="right">0</td>
<td align="right">3</td>
<td align="right">1</td>
</tr>
<tr>
<td>Hornet Sportabout</td>
<td align="right">18.7</td>
<td align="right">8</td>
<td align="right">360.0</td>
<td align="right">175</td>
<td align="right">3.15</td>
<td align="right">3.440</td>
<td align="right">17.02</td>
<td align="right">0</td>
<td align="right">0</td>
<td align="right">3</td>
<td align="right">2</td>
</tr>
<tr>
<td>⋮</td>
<td align="right">⋮</td>
<td align="right">⋮</td>
<td align="right">⋮</td>
<td align="right">⋮</td>
<td align="right">⋮</td>
<td align="right">⋮</td>
<td align="right">⋮</td>
<td align="right">⋮</td>
<td align="right">⋮</td>
<td align="right">⋮</td>
<td align="right">⋮</td>
</tr>
<tr>
<td>Lotus Europa</td>
<td align="right">30.4</td>
<td align="right">4</td>
<td align="right">95.1</td>
<td align="right">113</td>
<td align="right">3.77</td>
<td align="right">1.513</td>
<td align="right">16.90</td>
<td align="right">1</td>
<td align="right">1</td>
<td align="right">5</td>
<td align="right">2</td>
</tr>
<tr>
<td>Ford Pantera L</td>
<td align="right">15.8</td>
<td align="right">8</td>
<td align="right">351.0</td>
<td align="right">264</td>
<td align="right">4.22</td>
<td align="right">3.170</td>
<td align="right">14.50</td>
<td align="right">0</td>
<td align="right">1</td>
<td align="right">5</td>
<td align="right">4</td>
</tr>
<tr>
<td>Ferrari Dino</td>
<td align="right">19.7</td>
<td align="right">6</td>
<td align="right">145.0</td>
<td align="right">175</td>
<td align="right">3.62</td>
<td align="right">2.770</td>
<td align="right">15.50</td>
<td align="right">0</td>
<td align="right">1</td>
<td align="right">5</td>
<td align="right">6</td>
</tr>
<tr>
<td>Maserati Bora</td>
<td align="right">15.0</td>
<td align="right">8</td>
<td align="right">301.0</td>
<td align="right">335</td>
<td align="right">3.54</td>
<td align="right">3.570</td>
<td align="right">14.60</td>
<td align="right">0</td>
<td align="right">1</td>
<td align="right">5</td>
<td align="right">8</td>
</tr>
<tr>
<td>Volvo 142E</td>
<td align="right">21.4</td>
<td align="right">4</td>
<td align="right">121.0</td>
<td align="right">109</td>
<td align="right">4.11</td>
<td align="right">2.780</td>
<td align="right">18.60</td>
<td align="right">1</td>
<td align="right">1</td>
<td align="right">4</td>
<td align="right">2</td>
</tr>
</tbody>
</table>
<p>This vignette is only a toy example. I’d recommend you to use the <strong>DT</strong> package instead: <a href="https://github.com/rstudio/DT">https://github.com/rstudio/DT</a></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js" defer></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js" defer></script>
</body>
</html>
Reference in New Issue Copy Permalink