Datatables 設定 column 在 xs-screen 時自動隱藏
💻

Datatables 設定 column 在 xs-screen 時自動隱藏

Tags
Web
2021
Published
Published October 23, 2021

Datatables 是什麼

  1. Datatables 是一個 jQuery 表格套件,它可以將任何的 HTML 表格添加高級的交互功能

Datatables 的優點

  1. 自動分頁
  1. 可即時搜索
  1. 可即時排序
  1. 支持任何資料來源 (包含 DOM、javascript 及 Ajax 等)
  1. 豐富多樣的設定以及強大的 API 擴展

設定 column 在 xs-screen 時自動隱藏

動機

  1. 寫網頁的時候發現當 Table 的 Column 很多時,在小螢幕顯示器 (手機) 查看時,會被擠到很醜又很難閱讀

解決辦法

  1. 到 Bootstrap 的 Table 區塊 查詢是否有 method 可以直接使用,結果發現 v4.1.x 目前沒有提供 column 整個欄位在 xs-screen 時自動隱藏的解決辦法
  1. 到 Bootstrap 的 Display property 區塊 查詢是否有 method 可以直接使用,結果發現 v4.0 目前沒有提供 column 整個欄位在 xs-screen 時自動隱藏的解決辦法,僅提供區塊的 (divspan 等) xs-screen 自動隱藏的解決辦法
  1. 回到 Datatables,發現在官方的討論區中有網友也有相同的問題,逐一查看留言後,發現一個可用的解決辦法,需要搭配 Datatables 裡面的 reponsive methodcolumns method 以及 Breakpoints 的設定
      • 在 script 中加入 columns option
        • <script> $(document).ready(function () { $('#dataTable').DataTable({ "columns": [ {data: 'Date'}, {data: 'Category'}, {data: 'Articles'} ] }); }); </script>
      • 接著繼續在 script 中加入 responsive option,用來設定不同顯示器的 breakpoints 值
        • <script> $(document).ready(function() { $('#dataTable').DataTable({ "columns": [ {data: 'Date'}, {data: 'Category'}, {data: 'Articles'} ], "responsive": { breakpoints: [ { name: 'desktop', width: Infinity }, { name: 'tablet-l', width: 1024 }, { name: 'tablet-p', width: 767 }, { name: 'mobile-l', width: 480 }, { name: 'mobile-p', width: 320 } ] }, }); }); </script>
      • 最後,在想要隱藏的欄位加上 breakpoints 的設定,有關於 breakpoints 的設定可以參考 Datatables 官網 提供的數值
        • 這裡的 min-tablet-l 根據官方提供的解釋,min-tablet-l 僅在 tablet-ldesktop 可見。也就是說只要是顯示器的 width > 768 都能夠顯示出來,反之則隱藏
          • <script> $(document).ready(function() { $('#dataTable').DataTable({ "columns": [ {data: 'Date'}, {data: 'Category', 'className': 'min-tablet-l'}, {data: 'Articles'} ], "responsive": { breakpoints: [ { name: 'desktop', width: Infinity }, { name: 'tablet-l', width: 1024 }, { name: 'tablet-p', width: 767 }, { name: 'mobile-l', width: 480 }, { name: 'mobile-p', width: 320 } ] }, }); }); </script>

結果

加上 breakpoints 設定前

notion image
 

加上 breakpoints 設定後

notion image