第四节 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> ```