iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
Modern Web

快搭上姐姐的`微`前端便車系列 第 13

第13車廂-table界的神器!DataTables介紹篇(3)

本篇要延續DataTables介紹,如何引用拓展包呈現響應式版本

好心建議要先看:

  1. 第11車廂-table界的神器!DataTables介紹篇(1)
  2. 第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://ithelp.ithome.com.tw/upload/images/20210927/20142016TyP9JHmvot.png

詳細可看 官網 > 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" 
      }
    });

就完成啦!

收工XD
別走!(演兩次)

▲有看到上面影片嗎?他會隨著螢幕寬度不夠後,自動刪減

今天假設我們縮小時要先保留最後一行"編輯"以及"分機",怎麼辦?

有三種操作模式來控制表中列的可見性:

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對應欄位
https://ithelp.ithome.com.tw/upload/images/20210928/20142016fkhEUEXd9P.png

所以它就會從 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系列就先到這啦!
/images/emoticon/emoticon46.gif
其實有很多DataTables extensions及options設定,但可能要用到時再去查一下,基本上實務上可以用到的本系列相關文章就都差不多傾囊相授哩~

若你對控制選項需要修改或有疑問也可以參考:

  • 如何設定自定義子行渲染?或加內容?文章文章
  • 控制按鈕+ 靠右?文章
  • 更多初始化選項(中文)?文章

本系列相關文章:

  1. 第11車廂-table界的神器!DataTables介紹篇(1)
  2. 第12車廂-table界的神器!DataTables介紹篇(2)

上一篇
第12車廂-table界的神器!DataTables介紹篇(2)
下一篇
第14車廂-點開看更多?tableRWD應用篇
系列文
快搭上姐姐的`微`前端便車30

尚未有邦友留言

立即登入留言