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

本篇要延续DataTables介绍，如何引用拓展包呈现响应式版本

好心建议要先看:

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

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

起手式 (CDN方式)

▼范例使用Bootstrap 4 styling

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap4.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.9/js/responsive.bootstrap4.min.js"></script>

▲若要有响应式版本，需再引入dataTables.responsive.min.js ...等
而样式部分有多种可以选择，例如:也可以套用Bootstrap model...等，

详细可看官网 > https://datatables.net/extensions/responsive/examples/

然後
跟着范例 https://datatables.net/extensions/responsive/examples/styling/bootstrap4.html

HTML
＊classname dt-responsive 或 responsive一定要加上去

<table id="tableAjax" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">

data.json内容(延续前篇)

为API抓回资料，这边为测试用的JSON档

{
    "data": [
        {
            "name":       "Tiger Nixon",
            "position":   "System Architect",
            "salary":     "$3,120",
            "start_date": "2011/04/25",
            "office":     "Edinburgh",
            "extn":       "5421"
        },
        {
            "name":       "A Winters",
            "position":   "Director",
            "salary":     "$5,300",
            "start_date": "2011/07/25",
            "office":     "Edinburgh",
            "extn":       "8422"
        },
      .
      .
      .
      //其他
    ]
}

JQ (延续前篇)

 $('#tableAjax').DataTable({
  "ajax": 'data.json', //抓api url
      "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>'
              } ,
          },
      ],
      "columnDefs":[
        {
          targets: [0],
          width: "30%", 
        },
      ],
      //设定语言区块(language),
      language: {
          url: "https://cdn.datatables.net/plug-ins/1.11.3/i18n/zh_Hant.json" 
      }
    });

就完成啦！

收工ＸＤ
别走！（演两次）

▲有看到上面影片吗?他会随着萤幕宽度不够後，自动删减

今天假设我们缩小时要先保留最後一行"编辑"以及"分机"，怎麽办?

有三种操作模式来控制表中列的可见性：

1.自动

2.列优先级(columns.responsivePriority)

responsivePriority 可以设定谁优先要隐藏
- 预设值为:由右至左隐藏
  注意:值越小，显示优先级越高，未定义的优先级值的地方，它会自动将列的优先级设置为 10000，按照列的先後顺序依次隐藏。

详细可看 >官网 https://datatables.net/reference/option/columns.responsivePriority

$('#tableAjax').DataTable({
     responsive: true, // 预设为undefined
     .
     .
     //其他同上参数
     "columnDefs":[
        {
          targets: [6],
          responsivePriority: 1, 
        },
        {
          targets: [5],
          responsivePriority: 2, 
        },
      ],
         .
     .
     //其他同上参数
});

列优先级也可以由data-priorityth的属性定义（例如<th data-priority="1">First name</th>）
或者columns: [{ responsivePriority: 6 },{ responsivePriority: 5 }....]，上篇有提到与columnDefs效果一样喔

先看一下原图，targets对应栏位

所以它就会从 4 > 3 > 2 > 1 > 5 > 6 > 0 依序隐藏至下方

另外

3.类逻辑(Class logic)

可以通过columns.className选项来完成- 例如className: 'tablet desktop'就能将栏位出现在平板电脑和桌面屏幕宽度上。

断点(预设)

className	宽度 (x) 范围
desktop	x > 1024
tablet-l	768 < x <= 1024
tablet-p	480 < x <= 768
mobile-l	480 < x <= 768
mobile-p	x <= 320

*若要改预设可以透过responsive.breakpoints修改
例如以boostrap Grid来说.col-md 是指 ≥ 768px (平板以上....要走)
跟DataTable的tablet-l会不一致，所以可以设置为

$('#pep004table').DataTable({
     responsive: {
        breakpoints: [
        { name: 'desktop',  width: Infinity },
        { name: 'tablet-l', width: 1024 },
        { name: 'tablet-p', width: 767 },//原本是768~1024不含768
        { name: 'mobile-l', width: 480 },
        { name: 'mobile-p', width: 320 }
        ]
    },
});

断点逻辑操作
- not-XXX 除了命名断点之外的所有内容都可见
- min-XXX 在宽度大於或等於指定断点的断点中可见
- max-XXX 在宽度小於或等於指定断点的断点中可见
- XXX-l 为平板电脑和手机指定横向断点
- xxx-p 为平板电脑和手机指定纵向断点
  ....还有很多逻辑断点设定

详细可看 > 官网 https://datatables.net/extensions/responsive/classes

接下来我们就弄个范例
假设"职位"及"薪资"在平板以上要秀出来，但平板以下就要先缩起来

$('#tableAjax').DataTable({
    responsive: {
      breakpoints: [
        { name: 'desktop', width: Infinity },
        { name: 'tablet-l', width: 1024 },//原本是768~1024不含768
        { name: 'tablet-p', width: 767 },//
        { name: 'mobile-l', width: 480 },
        { name: 'mobile-p', width: 320 }
      ]
    },
    "ajax": 'data.json',
    "columns": [
      { data: 'name', title: "姓名" },
      {
        data: 'position',
        title: "职位",
        render: function (data, type, row) {
          return '<a href="" target="_blank">' + data + '</a>'
        }, "className": "min-tablet-l"
      }, // >=768px才可见
      { data: 'salary', title: "薪资", "className": "min-tablet-l" },// >=768px才可见
      { 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>'
        }
      },
    ],
    //语言区块(language),
    language: {
      url: "https://cdn.datatables.net/plug-ins/1.11.3/i18n/zh_Hant.json"
    }
});

这样就完成啦！
那我们DataTables系列就先到这啦！

其实有很多DataTables extensions及options设定，但可能要用到时再去查一下，基本上实务上可以用到的本系列相关文章就都差不多倾囊相授哩～