寫頁面前端時,使用表格的插件能夠快速漂亮的排版。本例子中使用jquery.dataTables來處理table。直接來點乾貨html
html代碼以下前端
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> <thead> <tr> <th>time</th> <th>name</th> <th>number</th> </tr> </thead> <tbody> <tr> <td>2016-01-1 10:10:10</td> <td>baidu</td> <td>12</td> </tr> <tr> <td>2016-02-1 10:10:10</td> <td>google</td> <td>54</td> </tr> <tr> <td>2016-01-1 10:15:10</td> <td>360</td> <td>21</td> </tr> </tbody> </table>
最簡單的初始化js代碼以下jquery
$(function(){ var table= $("#example").DataTable(); });
注意:html代碼中須要定義thead,tbody。網站
結果以下:google
能夠看出他是自動排序的。spa
若是想要按照時間逆序排列,js代碼以下.net
$(function(){ var table= $("#example").DataTable({ "order":[[0,"desc"]] }); });
注意:查看文檔時要注意版本是否一致。當時我就是沒有在乎這個問題,在網上找了好多資料,就是各類試,各個版本還不同,最後按照官網寫的,照樣不行。最後下載官網的插件
最新jquery,dataTables按照dataTables官網的代碼寫這才能夠。因此,看文檔必定要注意版本是否一致。不要掉進這個坑。code
還有更多的屬性和方法沒有寫,若是感興趣能夠查看官方網站了解更多信息。https://datatables.net/htm