"use strict";
// Class definition
var KTDatatablesExample = function [] {
// Shared variables
var table;
var datatable;
// Private functions
var initDatatable = function [] {
// Set date data order
const tableRows = table.querySelectorAll['tbody tr'];
tableRows.forEach[row => {
const dateRow = row.querySelectorAll['td'];
const realDate = moment[dateRow[3].innerHTML, "DD MMM YYYY, LT"].format[]; // select date from 4th column in table
dateRow[3].setAttribute['data-order', realDate];
}];
// Init datatable --- more info on datatables: //datatables.net/manual/
datatable = $[table].DataTable[{
"info": false,
'order': [],
'pageLength': 10,
}];
}
// Hook export buttons
var exportButtons = [] => {
const documentTitle = 'Customer Orders Report';
var buttons = new $.fn.dataTable.Buttons[table, {
buttons: [
{
extend: 'copyHtml5',
title: documentTitle
},
{
extend: 'excelHtml5',
title: documentTitle
},
{
extend: 'csvHtml5',
title: documentTitle
},
{
extend: 'pdfHtml5',
title: documentTitle
}
]
}].container[].appendTo[$['#kt_datatable_example_buttons']];
// Hook dropdown menu click event to datatable export buttons
const exportButtons = document.querySelectorAll['#kt_datatable_example_export_menu [data-kt-export]'];
exportButtons.forEach[exportButton => {
exportButton.addEventListener['click', e => {
e.preventDefault[];
// Get clicked export value
const exportValue = e.target.getAttribute['data-kt-export'];
const target = document.querySelector['.dt-buttons .buttons-' + exportValue];
// Trigger click event on hidden datatable export buttons
target.click[];
}];
}];
}
// Search Datatable --- official docs reference: //datatables.net/reference/api/search[]
var handleSearchDatatable = [] => {
const filterSearch = document.querySelector['[data-kt-filter="search"]'];
filterSearch.addEventListener['keyup', function [e] {
datatable.search[e.target.value].draw[];
}];
}
// Public methods
return {
init: function [] {
table = document.querySelector['#kt_datatable_example'];
if [ !table ] {
return;
}
initDatatable[];
exportButtons[];
handleSearchDatatable[];
}
};
}[];
// On document ready
KTUtil.onDOMContentLoaded[function [] {
KTDatatablesExample.init[];
}];
Điều này giả định sự quen thuộc cơ bản với DataTables, phần mở rộng nút của nó và khả năng liên quan để xuất dữ liệu bảng sang các định dạng tệp khác nhau, bao gồm cả Excel
Tôi đã viết một số ghi chú tổng quan, nhưng đây là một chủ đề lớn và cần thêm một chút không gian
Ở đây, tôi sẽ tập trung vào tài liệu tham khảo hữu ích khi bạn muốn tùy chỉnh xuất Excel
Cụ thể hơn, tôi sẽ chỉ xem xét các tệp Office Open XML [
1
2
3
4
1]. Các tệp 1
2
3
4
2 cũ hơn [tối đa Excel 2003] sử dụng định dạng khác và không được xem xét ở đâyCấu trúc tệp ExcelTài liệu tham khảo chính thức của Microsoft về cấu trúc tệp Excel có tại đây
Excel [. xlsx] Phần mở rộng cho Định dạng tệp ML Bảng tính XML mở của Office
Có thể tìm thấy các tiêu chuẩn cơ bản mà các tiện ích mở rộng trên dựa vào tại đây
ECMA-376 - Định dạng tệp Office Open XML
Tóm lại, tệp Excel là tệp zip chứa một loạt thư mục con và tài liệu XML
Sử dụng danh pháp Open Office, tệp zip là một “gói” chứa “các phần” [tệp XML] và các tệp tùy chọn khác, chẳng hạn như tệp đồ họa
Chúng ta sẽ xem xét một phiên bản rất đơn giản của cấu trúc đó, như được sử dụng bởi DataTables
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
"_rels": {
".rels": xml
},
"xl": {
"_rels": {
"workbook.xml.rels": xml
},
"workbook.xml": xml,
"styles.xml": xml,
"worksheets": {
"sheet1.xml": xml
}
},
"[Content_Types].xml": xml
}
DataTables xây dựng một tệp Excel mặc định từ một loạt các chuỗi XML được mã hóa cứng thành tài nguyên JavaScript sau
https. //cdn. bảng dữ liệu. lưới/nút/1. 6. 5/js/nút. html5. js
Tìm kiếm
1
2
3
4
3 để tự mình xem những thứ này. Ví dụ, ở đây bạn sẽ thấy 68 kiểu ô dựng sẵn được xác định trước mà bạn có thể tham khảo khi xuất dữ liệu DataTablesLoại nội dung
Tệp
1
2
3
4
4 chứa danh sách các bộ phận khác nhau trong gói, cùng với loại của từng bộ phận - ví dụ1
2
PartName="/xl/workbook.xml"
ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"
Các mối quan hệ
Tệp
1
2
3
4
5 chứa một bộ ID mối quan hệ. Sau đó, chúng được sử dụng để xác định mối quan hệ giữa các phần khác nhau trong góiCũng như tệp
1
2
3
4
6 cấp cao nhất, có thể có các tệp khác - chẳng hạn như tệp 1
2
3
4
7 được hiển thị ở trên, tệp này có thể chứa các mối quan hệ với các phần khác của nội dung tổng thể, chẳng hạn như 1
2
3
4
8, 1
2
3
4
9, 1
2
3
4
40, v.v.Một ví dụ là
1
2
3
4
1
2
3
4
4Sách bài tập
Tệp
1
2
3
4
41 chứa danh sách các trang tính1
2
3
4
81
2
3
4
9Ở đây chúng ta có thể thấy ID mối quan hệ
1
2
3
4
42 đang được sử dụngphong cách
Tệp
1
2
3
4
40 chứa thông tin liên quan đến phông chữ, đường viền, tô màu, căn chỉnh, v.v. Những thứ này sau đó có thể được sử dụng lại ở các địa điểm khác nhauMột ví dụ
1
2
3
4
2____23bảng tính
Tệp
1
2
3
4
8 chứa dữ liệu trang tính{
"_rels": {
".rels": xml
},
"xl": {
"_rels": {
"workbook.xml.rels": xml
},
"workbook.xml": xml,
"styles.xml": xml,
"worksheets": {
"sheet1.xml": xml
}
},
"[Content_Types].xml": xml
}
0{
"_rels": {
".rels": xml
},
"xl": {
"_rels": {
"workbook.xml.rels": xml
},
"workbook.xml": xml,
"styles.xml": xml,
"worksheets": {
"sheet1.xml": xml
}
},
"[Content_Types].xml": xml
}
1Hàng và Ô
Trong một hàng chẳng hạn như sau
{
"_rels": {
".rels": xml
},
"xl": {
"_rels": {
"workbook.xml.rels": xml
},
"workbook.xml": xml,
"styles.xml": xml,
"worksheets": {
"sheet1.xml": xml
}
},
"[Content_Types].xml": xml
}
2{
"_rels": {
".rels": xml
},
"xl": {
"_rels": {
"workbook.xml.rels": xml
},
"workbook.xml": xml,
"styles.xml": xml,
"worksheets": {
"sheet1.xml": xml
}
},
"[Content_Types].xml": xml
}
3Ý nghĩa của từng phần như sau
MụcMô tả1
2
3
4
45a hàng1
2
3
4
46hàng 131
2
3
4
47thẻ ô1
2
3
4
48tham chiếu ô A131
2
3
4
49định dạng của ô nằm ở chỉ mục 1
2
3
4
80 12 trong danh sách định dạng 1
2
3
4
811
2
3
4
82thuộc tính loại 1
2
3
4
83 cho ô, trong đó 1
2
3
4
84 có nghĩa là "chuỗi chia sẻ", nơi lưu trữ văn bản. 1
2
3
4
85chỉ số của chuỗi là 1
2
3
4
86 - đó là chuỗi thứ 26 trong danh sách chuỗi được chia sẻDanh sách các loại
1
2
3
4
83TypeDescription1
2
3
4
88boolean1
2
3
4
89date1
2
3
4
90error1
2
3
4
91an inline string [i. e. , không được lưu trữ trong phần chuỗi chia sẻ, nhưng trực tiếp trong ô]1
2
3
4
92số, được lưu trữ trực tiếp trong ô1
2
3
4
84chuỗi chia sẻ [vì vậy được lưu trữ trong phần chuỗi chia sẻ chứ không phải trong ô]1
2
3
4
94a công thức [một chuỗi đại diện cho công thức]Ví dụ sau đây cho thấy một ô [B2] chứa số 400, được lưu trữ trong chính ô đó
{
"_rels": {
".rels": xml
},
"xl": {
"_rels": {
"workbook.xml.rels": xml
},
"workbook.xml": xml,
"styles.xml": xml,
"worksheets": {
"sheet1.xml": xml
}
},
"[Content_Types].xml": xml
}
4{
"_rels": {
".rels": xml
},
"xl": {
"_rels": {
"workbook.xml.rels": xml
},
"workbook.xml": xml,
"styles.xml": xml,
"worksheets": {
"sheet1.xml": xml
}
},
"[Content_Types].xml": xml
}
5Trên đây chỉ là một ví dụ nhỏ về các tùy chọn cấu hình có thể được Excel hỗ trợ
Tài liệuTùy chọn Excel
Trang sau liệt kê các tùy chọn chính có thể được đính kèm với nút xuất Excel
https. //dữ liệu. mạng/tham chiếu/nút/excel
Các mục lưu ý là
95 - cung cấp quyền truy cập cấp thấp vào tệp Excel, nơi có thể thực hiện các tùy chỉnh - thường bằng cách thao tác trực tiếp các cấu trúc XML được mô tả trong các phần trước của bài đăng này1 2 3 4
96 - xem phần1 2 3 4
97 bên dưới để biết chi tiết1 2 3 4
98 và1 2 3 4
99 - đối với tệp Excel1 2 3 4
20 và1 2 3 4
21 - có bao gồm đầu trang và chân trang của bảng hay không1 2 3 4
22 và1 2 3 4
23 - dòng dữ liệu bổ sung được đưa vào bảng tính1 2 3 4
24 - Tên trang tính Excel1 2 3 4
25 - được thêm vào trang tính Excel. Xem phần1 2 3 4
26 bên dưới để biết chi tiết1 2 3 4
Ví dụ
{
"_rels": {
".rels": xml
},
"xl": {
"_rels": {
"workbook.xml.rels": xml
},
"workbook.xml": xml,
"styles.xml": xml,
"worksheets": {
"sheet1.xml": xml
}
},
"[Content_Types].xml": xml
}
6{
"_rels": {
".rels": xml
},
"xl": {
"_rels": {
"workbook.xml.rels": xml
},
"workbook.xml": xml,
"styles.xml": xml,
"worksheets": {
"sheet1.xml": xml
}
},
"[Content_Types].xml": xml
}
7Ở đây, các tùy chọn như
1
2
3
4
98 cũng có thể là các hàm{
"_rels": {
".rels": xml
},
"xl": {
"_rels": {
"workbook.xml.rels": xml
},
"workbook.xml": xml,
"styles.xml": xml,
"worksheets": {
"sheet1.xml": xml
}
},
"[Content_Types].xml": xml
}
4{
"_rels": {
".rels": xml
},
"xl": {
"_rels": {
"workbook.xml.rels": xml
},
"workbook.xml": xml,
"styles.xml": xml,
"worksheets": {
"sheet1.xml": xml
}
},
"[Content_Types].xml": xml
}
9Dữ liệu đã xuất
Trang sau đây bao gồm nhiều cách khác nhau để kiểm soát dữ liệu cụ thể nào được xuất từ DataTable sang Excel
https. //dữ liệu. mạng/tham chiếu/api/nút. xuất dữ liệu[]
Nếu các tùy chọn xuất được cung cấp như một phần của cấu hình nút DataTable, thì bạn sử dụng tùy chọn
1
2
3
4
28 được đề cập trong phần trướcNếu bạn dùng cái này như một bộ xử lý độc lập thì bạn dùng hàm
1
2
3
4
29 như sau1
2
3
4
81
2
1Các mục lưu ý là
30 - bộ chọn hàng1 2 3 4
31 - bộ chọn cột1 2 3 4
32 - bao gồm dữ liệu trực giao nào1 2 3 4
33 - loại bỏ HTML theo mặc định1 2 3 4
34 - loại bỏ các dòng mới theo mặc định1 2 3 4
35 - các chức năng định dạng ô khác nhau - xem bên dưới1 2 3 4
Đối với tùy chọn
1
2
3
4
35, bạn có thể cung cấp các chức năng khác nhau như sau1
2
2____73Mục lưu ý
37 - định dạng dữ liệu tiêu đề1 2 3 4
38 - định dạng dữ liệu chân trang1 2 3 4
39 - định dạng dữ liệu cơ thể1 2 3 4
00 - cơ hội cuối cùng để tùy chỉnh dữ liệu tổng thể. Thay đổi đối tượng{ "_rels": { ".rels": xml }, "xl": { "_rels": { "workbook.xml.rels": xml }, "workbook.xml": xml, "styles.xml": xml, "worksheets": { "sheet1.xml": xml } }, "[Content_Types].xml": xml }
01 chứa mảng{ "_rels": { ".rels": xml }, "xl": { "_rels": { "workbook.xml.rels": xml }, "workbook.xml": xml, "styles.xml": xml, "worksheets": { "sheet1.xml": xml } }, "[Content_Types].xml": xml }
20, mảng1 2 3 4
21 và mảng 2D1 2 3 4
04. Không có giá trị trả lại nào được sử dụng{ "_rels": { ".rels": xml }, "xl": { "_rels": { "workbook.xml.rels": xml }, "workbook.xml": xml, "styles.xml": xml, "worksheets": { "sheet1.xml": xml } }, "[Content_Types].xml": xml }
Xuất thông tin
Trang sau bao gồm các tùy chọn có thể phổ biến đối với nhiều nút cho một bảng
https. //dữ liệu. mạng/tham chiếu/api/nút. exportInfo[]
Như vậy, các tùy chọn có sẵn ở đây chồng chéo với một số tùy chọn được trình bày trong phần “Tùy chọn Excel” ở trên - ví dụ:
98 và1 2 3 4
99 - đối với tệp Excel1 2 3 4
22 và1 2 3 4
23 - dòng dữ liệu bổ sung được đưa vào bảng tính1 2 3 4
25 - được thêm vào trang tính Excel. Theo mặc định, điều này sẽ sử dụng giá trị1 2 3 4
10 của trang web{ "_rels": { ".rels": xml }, "xl": { "_rels": { "workbook.xml.rels": xml }, "workbook.xml": xml, "styles.xml": xml, "worksheets": { "sheet1.xml": xml } }, "[Content_Types].xml": xml }
Điều này thường được sử dụng bên ngoài nút hoặc với nút tùy chỉnh
Thay đổi cấp thấpXem xét tùy chọn nút sau
{
"_rels": {
".rels": xml
},
"xl": {
"_rels": {
"workbook.xml.rels": xml
},
"workbook.xml": xml,
"styles.xml": xml,
"worksheets": {
"sheet1.xml": xml
}
},
"[Content_Types].xml": xml
}
21
2
5Điều này truy cập dữ liệu XML cơ bản cho trang tính Excel. Sau đó, nó sử dụng jQuery để chọn nội dung văn bản của ô A1. Cuối cùng nó cập nhật nội dung đó
Một số ví dụ khác
Thay đổi định dạng của hàng 1
1
2
61
2
7GHI CHÚ. Kể từ jQuery 3. 4, lớp giả
{
"_rels": {
".rels": xml
},
"xl": {
"_rels": {
"workbook.xml.rels": xml
},
"workbook.xml": xml,
"styles.xml": xml,
"worksheets": {
"sheet1.xml": xml
}
},
"[Content_Types].xml": xml
}
11 không được dùng nữa. Xóa nó khỏi bộ chọn của bạn và lọc kết quả sau bằng cách sử dụng {
"_rels": {
".rels": xml
},
"xl": {
"_rels": {
"workbook.xml.rels": xml
},
"workbook.xml": xml,
"styles.xml": xml,
"worksheets": {
"sheet1.xml": xml
}
},
"[Content_Types].xml": xml
}
12Thay đổi định dạng của hàng 3
1
2
61
2
9Thay đổi định dạng của cột B
1
2
6PartName="/xl/workbook.xml"
ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"
1CẢNH BÁO - nếu bảng tính của bạn có đủ cột, bạn có thể thấy điều này cũng chọn cột BA, BB, v.v.
Thay đổi bất kỳ hàng nào có số hàng chứa số 3 [3, 13, 23, 30, 31…]
1
2
6PartName="/xl/workbook.xml"
ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"
3Lấy cột cuối cùng trong trang tính
1
2
6PartName="/xl/workbook.xml"
ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"
5Đây là một ví dụ lưu giữ các số rất dài dưới dạng văn bản [chứ không phải, ví dụ, dưới dạng số trong ký hiệu khoa học]
https. // stackoverflow. com/a/52047216/12567365
Đây là một ví dụ có thêm một bộ định dạng ô mới
PartName="/xl/workbook.xml"
ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"
6PartName="/xl/workbook.xml"
ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"
7Ví dụ sau minh họa việc tạo thêm sheet trong file Excel được tạo từ Datatables
https. //ý chính. github. com/northcoder-repo/05bde971c7879ea5ebc4907f323376fc
Nút tùy chỉnhBạn có thể tạo các nút tùy chỉnh hoàn toàn
https. //dữ liệu. net/tiện ích mở rộng/nút/tùy chỉnh
https. //dữ liệu. mạng/tham chiếu/tùy chọn/nút. nút. hoạt động
Xem xét điều này
PartName="/xl/workbook.xml"
ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"
8Nó sử dụng phương thức JavaScript
{
"_rels": {
".rels": xml
},
"xl": {
"_rels": {
"workbook.xml.rels": xml
},
"workbook.xml": xml,
"styles.xml": xml,
"worksheets": {
"sheet1.xml": xml
}
},
"[Content_Types].xml": xml
}
13 để gọi một hàmNhư được sử dụng ở đây, nó cho phép chúng tôi cung cấp chế độ bật lên "vui lòng đợi" tùy chỉnh [
{
"_rels": {
".rels": xml
},
"xl": {
"_rels": {
"workbook.xml.rels": xml
},
"workbook.xml": xml,
"styles.xml": xml,
"worksheets": {
"sheet1.xml": xml
}
},
"[Content_Types].xml": xml
}
14 là SweetAlert2]