第四節 DataTables · ThinkPHP實用開發工具箱

[TOC] ***** # DataTables簡介我們學習VUE,知道它的核心思想式組件和數據驅動,但是每一個組件都需要自己編寫模板,樣式,添加事件,數據等是非常麻煩的,所以餓了嗎推出了基于VUE2.0的組件庫,提供現成的PC端組件. # 安裝DataTables Github：[DataTables](https://github.com/DataTables/DataTables) CDN加速：[BOOTCDN](https://www.bootcdn.cn/datatables/) # 使用手冊中文手冊：[中文手冊](http://www.datatables.club/) 官方手冊：[官方手冊](https://datatables.net/manual/) # 第一個頁面 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Hello, world!</title>  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"> </head> <body> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> </tbody> </table>  <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>  <script> $(document).ready(function() { $('#example').DataTable(); }); </script> </body> </html> ```