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

接着来讲讲DataTables的设定与事件, 希望可以这回合结束掉它

---

初始化设定

DataTables如果都不做任何设定下, 本身就有预设一些好用的功能了, 例如:

筛选器(搜寻器): 可以下关键字去筛选项目, 会从所有栏位的值来筛选符合的项目自动分页: 字面上的意思, 原始的table是不会做分页的, 也就是说资料越多页面就越长, 想要分页要再另外写, 但套件是只要带资料进去, 他自动帮你分页好, 非常方便省时, 而且还能选择单页显示笔数栏位排序: 可以根据栏位做排序的动作, 如果是英文的话就照ABC顺序排, 如果是中文用笔画来排, 数字排序当然也是没问题

基本上这些功能就以足够拿来在一般看板使用

这些预设的功能, 就会有开关可以在元件初始化的时候去做设定
假如今天我只要单纯显示表格就好, 不要这些功能, 可以这样来写:

$('#example').DataTable({    "searching": false, //搜寻功能, 预设是开启    "paging": false, //分页功能, 预设是开启    "ordering": false //排序功能, 预设是开启});

那要怎么知道有哪些东西是可以做设定的?
DataTables有提供文件可以参考, 里面包含很多细项设定, 就不一一列举, 只讲几个简单的以及自己在开发上常用的来带过

1. 改变笔数选单(lengthMenu)

例如原本预设的笔数选单有10笔,25笔,50笔,100笔
假设今天我觉得这样有点太多了, 我只想给使用者10笔跟20笔的选项, 可以这样设定:

$('#example').DataTable({    "lengthMenu": [10, 20]});

2. 改变语言(language)

这边我本来以为是多国语系的设定, 殊不知是自己去改画面上要显示的文字, 很神奇, 可能是作者觉得这样比较省事(?)

//设定中的"_XXXX_"是套件的数据替换, 可以不带入, 另外, 名称不同的话会被当作纯文字显示$('#example').DataTable({    "language": {        "processing": "处理中...",        "loadingRecords": "载入中...",        "lengthMenu": "显示 _MENU_ 项结果",        "zeroRecords": "没有符合的结果",        "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",        "infoEmpty": "显示第 0 至 0 项结果，共 0 项",        "infoFiltered": "(从 _MAX_ 项结果中过滤)",        "infoPostFix": "",        "search": "搜寻:",        "paginate": {            "first": "第一页",            "previous": "上一页",            "next": "下一页",            "last": "最后一页"        },        "aria": {            "sortAscending": ": 升幂排列",            "sortDescending": ": 降幂排列"        }    }});

3. 改变DOM(dom)

设定DOM之前, 要先了解它的规则, 在DOM的设定上是以DataTables在画面上呈现的元件来切割重新摆放, 大至切分为:

l-(length changeing): 单页显示笔数f-(filtering): 筛选器t-(table): 表格本身i-(information): 表格讯息p-(pagination): 切换页面r-(processing): "处理中"的区块(处理大量数据时比较常用到)

再来是包裹的规则, 是使用<跟>符号包夹来做为div, 其中内容可以加入元件id及class样式, 这部分的设定要搭配CSS套件, 以我自己在开发上最常用的Bootstrap为例, 预设的DOM写法是:

$('#example').DataTable({    "dom": `<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>            <'row'<'col-sm-12'tr>>            <'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>`});

解析出来的html会长成这样:

<div class='row'>    <div class='col-sm-12 col-md-6'>        // length changeing    </div>    <div class='col-sm-12 col-md-6'>        // filtering    </div></div><div class='row'>    <div class='col-sm-12'>        // table & processing    </div></div><div class='row'>    <div class='col-sm-12 col-md-5'>        // information    </div>    <div class='col-sm-12 col-md-7'>        // pagination    </div></div>

假设要把pagination放到上面, information要拿掉不使用, length changeing放到下面, 可以这样改写:

$('#example').DataTable({    "dom": `<'row'<'col-sm-12 col-md-5'f><'col-sm-12 col-md-7'p>>            <'row'<'col-sm-12'tr>>            <'row'<'col-sm-12 col-md-6'l>>`});

---

Ajax加入数据

其实加入数据的方式很多种, 例如最简单的一开始就先把table内容做好, 再做套件初始化, 但假设今天数据变动, 又要再重新做一次table, 或是页面整个重新整理, 也太搞肛了
所以现实中数据基本上都改成以动态方式来加入, 这边讲的方式, 也是最常用的Ajax技术来加入数据

那他的写法就跟jQuery的ajax()几乎是一模模一样样:

$('#example').DataTable({    "ajax": {        "url": "XXX", //要抓哪个地方的资料        "type": "GET", //使用什么方式抓        "dataType": 'json', //回传资料的类型        "success": function(){            console.log("你是右边!!")        }, //成功取得回传时的事件        "error": function(){            console.log("资料取得失败 回去检讨检讨")        } //失败事件    }});

比较需要注意的是, 抓回来的资料最外层必须用key值"data"来包住, 例如:

{     'data':         [{            'name': '王小明',            'age': '25',            'startdate': '20110607'        },{            'name': '王中明'            'age': '40',            'startdate': '20100311'        },        ...        ] }

---

数据对应栏位

数据接回来之后, 基本上会自动做栏位对应, 例如name对应到第一栏, age对应到第二栏, startdate对应到第三栏...等等依此类推
但假设今天后端丢回来的资料, 我只想知道他的姓名跟年龄而已呢?
这时候就可以用手动设定栏位对应的方式, 写法如下:

$('#example').DataTable({    "ajax": {        //取得数据内容    },    "columns": [        { "data": "name" }, //第一栏使用data中的name        { "data": "age" } //第二栏使用data中的age    ]});

数据渲染

假设今天startdate我也要放进去, 但我需要改成yyyy/MM/dd的格式, 这时候就可以在数据对应到栏位时, 做渲染数据的动作, 再显示到画面上, 例如:

$('#example').DataTable({    "ajax": {        //取得数据内容    },    "columns": [        { "data": "name" }, //第一栏使用data中的name        { "data": "age" }, //第二栏使用data中的age        {             "data": "startdate",            "render": function (data, type, row, meta) {                return data.substr(0,4)+'/'+data.substr(4,2)+'/'+data.substr(6,2);            }        }, //第三栏使用data中的startdate    ]});

这边有看到渲染的方式是在原本的data后面加入render方法, 而后面的function有带入四个参数, 这边只用到其中的data, 也就是当前栏位的数据, 其他的栏位说明及用法可以参考这边的function render区块, 例如row可以判断是第几列, type可以判断数据的型别等等

---

竟然真的没办法这回合结束掉, 事件只好留到趴3再来记录了

下週见~