快速使用 · layui

## 快速使用 ***** >[info] 創建一個table實例最簡單的方式是，在頁面放置一個元素` <table id="demo"></table>`，然后通過 table.render() 方法指定該容器，如下所示： >[info] 上面你已經看到了一個簡單數據表格的基本樣子，你一定迫不及待地想知道它的使用方式。下面就是它對應的代碼： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>table模塊快速使用</title> <link rel="stylesheet" href="/layui/css/layui.css" media="all"> </head> <body> <table id="demo" lay-filter="test"></table> <script src="/layui/layui.js"></script> <script> layui.use('table', function(){ var table = layui.table; //第一個實例 table.render({ elem: '#demo' ,height: 312 ,url: '/demo/table/user/' //數據接口 ,page: true //開啟分頁 ,cols: [[ //表頭 {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'} ,{field: 'username', title: '用戶名', width:80} ,{field: 'sex', title: '性別', width:80, sort: true} ,{field: 'city', title: '城市', width:80} ,{field: 'sign', title: '簽名', width: 177} ,{field: 'experience', title: '積分', width: 80, sort: true} ,{field: 'score', title: '評分', width: 80, sort: true} ,{field: 'classify', title: '職業', width: 80} ,{field: 'wealth', title: '財富', width: 135, sort: true} ]] }); }); </script> </body> </html> ```