前端Table的全面講解

一、表格結構與表頭設計

表格從某種意義上講，就是查看數據的一種方式，表格用來呈現的數據結構一般是二維數據。在表格的結構設計時，我們需要儘可能的讓數據對齊、美觀，同時儘可能的保持表格的簡潔，這樣可以使用戶更快速地找到需要的數據。

表頭是表格的重要組成部分，它是表格數據的一種組織形式，一般用於將表中的數據按不同的欄位分組。表頭不僅要簡潔明了、美觀大方，還需要能夠準確表示數據的屬性及含義。我們可以使用 CSS 進行表格的美化，並且可以通過增加滑鼠放置時的 hover 效果來增強表格的可讀性。

/* 表格樣式 */
table {
  border-collapse: collapse;
  width: 100%;
}

/* 表格邊框樣式 */
table, th, td {
  border: 1px solid gray;
}

/* 滑鼠懸停時的樣式 */
tr:hover {
  background-color: #f5f5f5;
}

/* 表頭樣式 */
th {
  background-color: #e6e6e6;
  text-align: center;
  padding: 8px;
}

/* 單元格樣式 */
td {
  text-align: center;
  padding: 8px;
}

二、數據交互與分頁功能

在前端中，我們一般會使用AJAX技術來實現與後端的數據交互，從而實現前端頁面的數據動態更新。為了提高用戶體驗，我們一般會對表格數據增加分頁功能，這樣可以減少一次性載入大量數據的負擔，同時也提升了頁面的響應速度。

// AJAX 數據請求
$.ajax({
  url: '/api/tabledata',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    // 更新表格數據
    updateTable(data);
  }
});

// 分頁功能
function initPagination(totalPages) {
  $('#table-pagination').pagination({
    pages: totalPages,
    displayedPages: 3,
    edges: 1,
    cssStyle: '',
    prevText: '上一頁',
    nextText: '下一頁',
    onPageClick: function(pageNumber) {
      // 更新數據
      updateData(pageNumber);
    }
  });
}

三、表格數據排序功能

在數據量比較大的情況下，一般是需要對表格數據進行排序的，這樣可以使用戶更快速地找到所需要的數據。我們可以使用 JavaScript 實現簡單的表格數據排序功能，對於需要更加複雜的排序功能，可以使用一些比較成熟的表格插件。

function sortTable(n) {
  // 獲取表格
  var table = document.getElementById("myTable");

  // 獲取 tr 元素
  var rows = table.rows;

  // 將所有行的 class 樣式設置為 "unselected"
  for (var i = 0; i < rows.length; i++) {
    rows[i].classList.add("unselected");
  }

  // 排序
  var switching = true;
  while (switching) {
    switching = false;
    for (var i = 1; i  y.innerHTML.toLowerCase()) {
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }

  // 將排序的行的 class 樣式設置為 "selected"
  for (var i = 1; i < rows.length; i++) {
    rows[i].classList.remove("unselected");
    rows[i].classList.add("selected");
  }
}

四、表格數據篩選功能

除了表格數據排序之外，對於表格數據篩選功能同樣也是很有必要實現的一項功能。我們可以通過對表格數據進行模糊搜索、精確搜索等各種方式進行篩選，這樣可以讓用戶更加快速地找到所需要的數據。

// 表格篩選功能
function filterTable(searchString) {
  // 獲取表格
  var table = document.getElementById("myTable");

  // 獲取 tr 元素
  var rows = table.rows;

  // 遍歷每一行的數據，進行篩選
  for (var i = 0; i < rows.length; i++) {
    var shouldShow = false;
    var cells = rows[i].cells;
    for (var j = 0; j  -1) {
        shouldShow = true;
        break;
      }
    }
    if (shouldShow) {
      rows[i].classList.remove("hide");
      rows[i].classList.add("show");
    } else {
      rows[i].classList.remove("show");
      rows[i].classList.add("hide");
    }
  }
}

五、表格數據導出功能

表格數據導出功能同樣也是非常有用的一項功能，通過該功能用戶可以快速地將表格中複雜數據信息進行導出，並進行相應的處理。我們可以使用一些現成庫比如 XSLX.js 來實現表格數據的導出功能。

var workbook = XLSX.utils.book_new();

// 創建 worksheet，並填寫對應數據
var worksheet = XLSX.utils.json_to_sheet(data);

// 將 worksheet 添加進 workbook
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

// 導出 Excel
XLSX.writeFile(workbook, 'table.xlsx');

六、總結

表格是前端中常用的一種數據展示方式，使用表格既可以提高用戶體驗、又可以讓用戶更方便地查看數據。通過本文的介紹，我們可以了解到表格的結構設計、數據交互與分頁、數據排序、數據篩選和數據導出等豐富的功能。在實際項目中，我們可以根據需求自由組合這些功能，以達到更好的用戶體驗和數據管理效果。