Bảng dữ liệu xuất excel tất cả các trang

Nút print cung cấp rất nhiều tính linh hoạt trong việc lựa chọn dữ liệu sẽ được xuất. Đối tượng exportOptions có thể được sử dụng để xác định những cột và hàng nào được bao gồm trong dữ liệu được in. Một đối tượng DataTables selector-modifier có thể được cung cấp bằng cách sử dụng tùy chọn exportOptions.modifier và có khả năng xác định thứ tự của bảng in và nếu có bao gồm các hàng lọc, trong số các hành động khác

Trong ví dụ này, phần mở rộng Chọn cho DataTables được sử dụng để cung cấp cho người dùng cuối khả năng chọn các hàng bằng cách nhấp vào chúng. Hai nút in được sử dụng trong ví dụ này để minh họa tùy chọn exportOptions

  • Nút đầu tiên sẽ in tất cả các hàng [sau khi lọc]
  • Nút thứ hai sẽ chỉ in các hàng đã chọn
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', text: 'Print all' }, { extend: 'print', text: 'Print selected', exportOptions: { modifier: { selected: true } } } ], select: true } ]; } ];

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

Chủ Đề