Ví dụ này hiển thị DataTables chỉ với lớp order-column được chỉ định. Thông thường, bạn sẽ muốn sử dụng lớp đối tượng stripe ngoài order-column [cũng có thể là hover], nhưng ví dụ này chỉ hiển thị đánh dấu cột theo thứ tự
- 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[]; } ];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 những gì đượ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
Đôi khi, bạn có thể muốn thay đổi trình tự hướng sắp xếp mặc định cho các cột [một số hoặc tất cả chúng] thành 'giảm dần' thay vì tăng dần mặc định của DataTables. Điều này có thể được thực hiện thông qua việc sử dụng tham số khởi tạo columns.orderSequenceDT. Tham số này cũng cho phép bạn giới hạn thứ tự theo một hướng duy nhất hoặc bạn có thể thêm hành vi phức tạp vào tương tác đặt hàng
Ví dụ dưới đây cho thấy
- Cột 1 - thứ tự mặc định
- Cột 2 - thứ tự mặc định
- Cột 3 - chỉ thứ tự tăng dần
- Cột 4 - thứ tự giảm dần, tiếp theo là tăng dần rồi lại tăng dần
- Cột 5 - chỉ sắp xếp giảm dần
- Cột 6 - thứ tự mặc định
Điều đáng chú ý là tôi không có trường hợp sử dụng tốt khi bạn có thể kết hợp hành vi đặt hàng phức tạp như vậy vào một bảng duy nhất, nhưng ví dụ này cho thấy cách sử dụng các tùy chọn này và do đó được áp dụng trên tất cả các cột
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[ { "aoColumns": [ null, null, { "orderSequence": [ "asc" ] }, { "orderSequence": [ "desc", "asc", "asc" ] }, { "orderSequence": [ "desc" ] }, null ] } ]; } ];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 những gì đượ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