[鼠年全马铁人挑战] Week04 - 前端表格套件DataTables用法笔记 part1

之前没有提到全马铁人的文章规划, 不过现在大致有了一些雏型
在前几章大概都会以自己用过的好用或是强大的套件来做纪录并分享给还没用过又有兴趣使用的邦友
套件不限前端或后端, 像上次就是后端的就是这么简单Dapper套件, 这次就是前端的表格套件DataTables
套件纪录完之后, 会正式的往前端上课的内容前进
例如纪录JavaScript基础、进阶、Vue.js等等，并实作一些範例出来
欢迎按讚分享订阅, 订阅数满87人不会抽任何东西, 谢谢~

接着正文开始

万用的前端表格套件-DataTables

还有万用的起手式

DataTables是什么?

DataTables是网页前端表格套件(废话, 从开始到现在已经讲了三次)
简单来说, 他可以把原本长成这样的丑东西 ↓

变成这样 ↓

还是很丑? 我也觉得, 来稍微修饰美化一下 ↓

这样能接受了吗? 那你太浅了

除了外观可以改变之外, 还有多种功能呢!!
包含分页、栏位排序、快速搜寻等等强大功能

最重要的是
完全免费
完全免费!!!
完全免费!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

本人最喜欢不用钱又好用的东西了~ 哈哈

使用DataTables的契机

来分享一下为什么我会使用到这个套件
两年半前我还是个菜逼巴工程师, 真的很菜不开玩笑, 连Html都没碰过, 连SQL都不知道是什么(乾那还敢自称工程师), 就被长官赋予任务要做一个Dashboard的网页, 多久后要上线之类的, 那时我连Dashboard是什么都不知道...
还好有前辈可以问, 真的觉得每间公司都要有个厉害的前辈R
前辈知道我的状况之后, 直接指导说可以去套别人已经写好的版, 就不用再花时间慢慢刻, 也推荐我用AdminLTE来套, DataTables就是AdminLTE里面使用的表格套件, 当然AdminLTE还有很多好用的套件, 说不定可以再写几篇来专门介绍, 有兴趣的可以先去它的官网看看
至于什么都不会的我是怎么去套版写网页的就不分享了, 那个过程可能从趴1写到趴10都写不完...

接着来看看套件怎么使用吧

Getting Started

套件使用之前都要先 摇一摇, 是先引用它
DataTables提供几种方式可以引用:

这边只讲CDN及Download引用的方式, 因为其他的我都不会用xD

讲个小故事, 一般大家都是使用CDN直接引用的方式, 因为步骤最简单, 加一行程式码就解决
我在开发时也是这样用的, 但后来发生很严重的事情......
......
......
......那一次, 我刚开发完新系统, 也测试过完全没问题, 主管同意后就直接上线了
殊不知, 系统一上线, 线上电话就爆炸, 每个接电话的同事眼睛都往我这瞪
我知道一定挫赛了...
阿开发的时候测试都没问题阿??
打开使用者电脑的浏览器F12, 要Debug看到底是什么问题, 结果一堆红字, 所有外部引用的档案全部被挡下来
最后赶紧下架系统, 把外部引用全部下载下来再从本地端引用, 再上回去, 办公室的电话终于冷静了...
我的钱包君也冷静了, 因为喷了一堆饮料钱出来赔罪
从此我不再直接引用CDN, 一律都先下载回来再引用
各位客官如果不嫌弃也请试试看, 实在非常的刺激好玩呢~!!

回到正题, DataTables提供多种框架及样式可选择, 下载之前他会先询问要用的哪种样式:
Step 1. 选择一个框架及样式
基本上我都选Bootstrap4, 因为搭配Bootstrap的样式会好看许多, 但Bootstrap要另外引用

Step 2. 选择 Packages
这边一样是选DataTables, 如果需要jQuery再另外引用, 第四个要钱所以不用xD

Step 3. 选择扩展(额外的功能)
这里我就没有选, 基本款就够用了, 如果之后有用到再回来补充


Step 4. 最后就是选择下载方式
记得先看看公司是不是有防火墙会挡的问题..., 没问题就选CDN引用最快, 会挡的话就乖乖的先下载下来再引用吧!!

引用的方式应该不用特别说吧? CSS就引用在</head>之前, js就引用在</body>之前, 结果还是说了
特别要注意, 因为DataTables有对jQuery的依赖, 所以引用DataTables的js之前, 一定要先引用jQuery, 否则会跳错喔~

初始化

都引用完成之后, 就可以开始来使用他啰~
DataTables的初始化方式是这样的, 首先先準备好你的表格

<div class="m-4">    <table id="example" class="table" style="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>Brenden Wagner</td>                <td>Software Engineer</td>                <td>San Francisco</td>                <td>28</td>                <td>2011/06/07</td>                <td>$206,850</td>            </tr>            <tr>                <td>Fiona Green</td>                <td>Chief Operating Officer (COO)</td>                <td>San Francisco</td>                <td>48</td>                <td>2010/03/11</td>                <td>$850,000</td>            </tr>        </tbody>    </table></div>

接着, js script里面写下初始化语法, 再念个咒语

    $('#example').DataTable();

再来就是刘谦time

美美的表格就此诞生

下一篇来纪录我用过的DataTables各种设定以及事件触发等等
这週就先到这边啰~
记得按讚分享订阅唷xD