DataTables xuất excel chọn cột

Trong bài viết này, chúng ta sẽ xem loại bỏ hoặc ẩn các cột trong khi xuất dữ liệu trong datatable. Khi chúng tôi đang sử dụng bảng dữ liệu jquery để hiển thị dữ liệu trong bảng dữ liệu và xuất thông tin bảng dữ liệu sang PDF, Excel hoặc CSV, chúng tôi có thể loại trừ hoặc ẩn một số cột. Vì vậy, sau đây mình sẽ demo cho các bạn cách bỏ hoặc ẩn cột khi xuất dữ liệu bằng jquery. Bạn có thể loại trừ một số cột trong khi xuất dữ liệu từ datatable. Và ngoài ra bạn có thể bỏ cột khi xuất dữ liệu khi sử dụng jquery

Vì vậy, hãy xem cách xuất các cột cụ thể ở dạng có thể định dạng dữ liệu hoặc xóa một cột cụ thể trong khi xuất dữ liệu ở dạng có thể định dạng dữ liệu

Trong ví dụ này, nút sao chép sẽ xuất chỉ mục cột 1 và tất cả các cột hiển thị, nút Excel sẽ chỉ xuất các cột hiển thị và nút PDF sẽ chỉ xuất chỉ mục cột 1, 2 và 4 

Điều khiển hiển thị cột cũng được bao gồm. Vì vậy, bạn có thể thay đổi các cột một cách dễ dàng và xem tác dụng của các tùy chọn xuất

Tùy chọn exportOptions.columns của nút print cung cấp khả năng chỉ chọn một số cột nhất định (sử dụng column-selector). Trong ví dụ này, chỉ các cột hiển thị được sử dụng để in

Các nút hiển thị cột (colvis) được bao gồm trong ví dụ này để có thể dễ dàng thay đổi mức độ hiển thị của cột. Ngoài ra, cột cuối cùng trong bảng được ẩn theo mặc định (columns.visible)

NamePositionOfficeAgeStart dateSalaryNamePositionOfficeAgeStart dateSalaryTiger NixonSystem ArchitectEdinburgh612011/04/25$320,800Garrett WintersAccountantTokyo632011/07/25$170,750Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060Airi SatouAccountantTokyo332008/11/28$162,700Brielle WilliamsonIntegration SpecialistNew York612012/12/

• Javascript
• HTML
• CSS
• Ajax
• Kịch bản phía máy chủ

Javascript hiển thị bên dưới được sử dụng để khởi tạo bảng được hiển thị trong ví dụ này

$(document).ready(function() { $('#example').DataTable( { dom: 'Bfrtip', buttons: [ { extend: 'print', exportOptions: { columns: ':visible' } }, 'colvis' ], columnDefs: [ { targets: -1, visible: false } ] } ); } );

Ngoài đoạn mã trên, các tệp thư viện Javascript sau được tải để sử dụng trong ví dụ này

HTML được hiển thị bên dưới là phần tử bảng HTML thô, trước khi nó được DataTables nâng cao

Ví dụ này sử dụng một chút CSS bổ sung ngoài nội dung được tải từ các tệp thư viện (bên dưới), để hiển thị chính xác bảng. CSS bổ sung được sử dụng được hiển thị bên dưới

Các tệp thư viện CSS sau đây được tải để sử dụng trong ví dụ này nhằm cung cấp kiểu dáng của bảng

Bảng này tải dữ liệu bằng Ajax. Dữ liệu mới nhất đã được tải được hiển thị bên dưới. Dữ liệu này sẽ tự động cập nhật khi có bất kỳ dữ liệu bổ sung nào được tải