第12车厢-table界的神器!DataTables介绍篇(2)

延续上篇<第11车厢-table界的神器!DataTables介绍篇(1)>，今日再介绍其他参数设定

好的!延续上篇<第11车厢-table界的神器!DataTables介绍篇(1)>的基本介绍，其实已经可以用了！
只是还有一些客制化的功能怎麽设定呢？让我们继续看下去！

首先先复习一下，

完整语法结构

$(datatable_id).DataTable({
    设定属性/预设功能区块,
    设定资料来源区块(data or ajax….等),
    设定资料栏位区块(columns),
    设定语言区块(language),
    设定栏位元素定义区块(columnDefs),
    设定列元素区块(rowCallback)…等
})

再继续介绍，若要设定显示页数、搜寻...等预设文字的话，可以设定此参数

设定语言区块

$(datatable_id).DataTable({
    // ...其他参数
    language: {
        "lengthMenu": "显示 _MENU_ 笔资料",
        "sProcessing": "处理中...",
        "sZeroRecords": "没有匹配结果",
        "sInfo": "目前有 _MAX_ 笔资料",
        "sInfoEmpty": "目前共有 0 笔纪录",
        "sInfoFiltered": " ",
        "sInfoPostFix": "",
        "sSearch": "搜寻:",
        "sUrl": "",
        "sEmptyTable": "尚未有资料纪录存在",
        "sLoadingRecords": "载入资料中...",
        "sInfoThousands": ",",
        "oPaginate": {
            "sFirst": "首页",
            "sPrevious": "上一页",
            "sNext": "下一页",
            "sLast": "末页"
        },
        "order": [[0, "desc"]],
        "oAria": {
            "sSortAscending": ": 以升序排列此列",
            "sSortDescending": ": 以降序排列此列"
        }
    },
})

▲ 此为简易版

中文设定 * 详细可看 > 官网 https://datatables.net/plug-ins/i18n/Chinese-traditional

也可以使用CDN载入方式

$(datatable_id).DataTable(
    // ...其他参数
    language: {
        url: "https://cdn.datatables.net/plug-ins/1.11.3/i18n/zh_Hant.json" 
     }
)

或者我们实际上工作上会先将　

• 参数另存为zh_Hant.json档 > 再 引用url档案位置
  这样就能避免拢长的程序码，专案上也能共用(如图)
  

这样就完成啦！

结果资料处理

上篇文章最後有提到，假设

• 资料载入後，不改原始资料前提下，我们想新增栏位要怎麽设定?
  又或者
• 资料载入後，不改原始资料前提下，想再做点处理，例如加超连结...等行为?
  以上可以靠columns的render属性对结果进行重新渲染

设定资料栏位区块(columns)

其他columns参数 * 详细可看 > 官网 https://datatables.net/reference/option/columns

render　後为函式
- data： 该td格的具体资料
- type： 标识了这一次呼叫的请求型别，会有filter、display、type、sort
- row： 该tr行的完整资料来源
return 返回最终想要展示的内容

$(#tableAjax).DataTable({    
      "ajax": 'data.json',
      "columns": [ 
          { data: 'name',title: "姓名" },
          { data: 'position',
            title: "职位" ,
            render: function (data, type, row) {
              return '<a href="" target="_blank">'+data+'</a>' // 这边是加连结
            }
          },
          { data: 'salary',title: "薪资" },
          { data: 'start_date',title: "开始工作日" },
          { data: 'office',title: "办公室" },
          { data: 'extn',title: "分机" },
          { data: null ,title: "操作功能",  // 这边是栏位
            render: function (data, type, row) {
              return '<button type="button" class="btn btn-warning btn-sm">编辑</button> ' +
                      '<button type="button" class="btn btn-danger btn-sm">删除</button>'
              } 
          },
      ],
})

这样我们就可以在最後一栏位看到我们刚刚新增的<button>，以及刚刚"职位"的栏位变成超连结了！

那假设我们

• 要将某栏位，或全部栏位再额外设定width或className
  可以改设定以下(跟columns很像)

设定栏位元素定义区块(columnDefs)

$(datatable_id).DataTable({
    // ...其他参数
    columnDefs:[
        {
          targets:目标栏位索引,
          width:"30%", // 设定宽度
          createdCell: function (td, cellData, rowData, row, col) { //操作dom元素
           ...操作该格外观...等
          },
          className: "text-center",// 新增class
          ...等其他参数
        }
    ],
})

其他columns参数 * 详细可看 > 官网 https://datatables.net/reference/option/columnDefs

• targets：指定该区块所套用的栏位目标，依据索引值来指定哪一个栏位，起始值是从0开始算起，可以选择单一目标或多个目标一起套用。
  • 0或正整数 - 从左边的列索引计数
  • 负整数 - 列索引从右边计数
  • "_all" - 所有的列
  • 只要指定特定一个时,可以写成 targets: 0 或 targets: [0]，多个时为 targets: [0,1,2]
• createdCell：操作dom元素
  • cell //已经创建的td节点,EX: <td class="text-center sorting_1" style="width: 30%;">Tiger Nixon</td>
  • cellData //该td内容,EX:Tiger Nixon
  • rowData //整行tr的数据对象
  • rowIndex // DataTables内部的行索引
  • colIndex // DataTables内部的列索引
• className：新增className
  • 需要新增多个可以写成 className: 'text-center font-weight-bold text-info'

$(datatable_id).DataTable({
    // ...其他参数
  "columnDefs":[
    {
      targets: [0], // 第一栏 
      createdCell: function (cell, cellData, rowData, rowIndex, colIndex) {
        $(td).css('width', '30%') //可写其他设定
      },
    },
    {
      targets: '_all',//全部拦
      className: 'text-center'  
    }
  ],
})

这样我们就可以在每一td都有text-center，且第一个td宽度都变30%了！

而如果我们要只是要设定宽度，其实可以改为以下

$(datatable_id).DataTable({
    // ...其他参数
  "columnDefs":[
    {
      targets: [0], // 第一栏
      createdCell: function (cell, cellData, rowData, rowIndex, colIndex) {
         // ...这边是设定td
      },
       width: "30%", 
    },
  ],
})

只是写在外面，就是设定到th的宽度30%喔!

备注:

• DataTables提供了两个参数来定义列属性：columns 和 columnDefs，这两个参数名，不管使用哪个，最终效果是一样的
• 两个参数可以同时使用，但是columns定义的优先级最高
• 当columnDefs里对同一列有多个定义时，最开始的定义优先级最高

那dataTables的基本使用，应该都差不多了！
不过，我们来看看小萤幕的显示，还是没有很美观耶....

可以制作成像我们第9车厢-使用content:attr()实现tableRWD应用这样吗？缩小可以变得比较易阅读的！
这难道要自己在写function吗?
都说是神器了！当然连tableRWD样式能使用别的引入让table快速更美观罗！
这就留到下篇揭晓吧

本系列相关文章:

1. 第9车厢-使用content:attr()实现tableRWD应用
2. 第10车厢-你今天table了吗?tableRWD+简易分页应用篇
3. 第11车厢-table界的神器!DataTables介绍篇(1)

本篇参考资料/延伸阅读:
https://dotblogs.com.tw/shadow/2018/04/03/063037
https://s123600g.medium.com/html-datatables%E7%B3%BB%E5%88%97%E7%AD%86%E8%A8%98-3198f3c9a046
https://iter01.com/437540.html
https://blog.csdn.net/LDY1016/article/details/84849227
https://datatables.club/reference/option/columns.createdCell