Hướng dẫn datatable bootstrap - khởi động dữ liệu
|
Trong bài này, bạn sẽ được học cách phân trang cho bảng biểu bằng Bootstrap 4 và thư viện DataTables kèm theo. Một số lưu ý bạn cần nắm trong bài như sau. Bài viết sẽ sử dụng phân trang ảo, có nghĩa là dữ liệu được tải hoàn toàn trên trang Web rồi mới phân trang. Đây là cách phân trang chỉ giúp cho giao diện của bạn đẹp hơn, tương tác với người dùng tốt hơn nhưng không có ý nghĩa về mặt tiết kiệm băng thông so với cách phân trang truyền thống. Do đó, không nên lạm dụng cách phân trang này, trừ khi bạn muốn làm giao diện đẹp và thẩm mỹ.phân trang ảo, có nghĩa là dữ liệu được tải hoàn toàn trên trang Web rồi mới phân trang. Đây là cách phân trang chỉ giúp cho giao diện của bạn đẹp hơn, tương tác với người dùng tốt hơn nhưng không có ý nghĩa về mặt tiết kiệm băng thông so với cách phân trang truyền thống. Do đó, không nên lạm dụng cách phân trang này, trừ khi bạn muốn làm giao diện đẹp và thẩm mỹ. Show Thư viện DataTablesThư viện DataTables là một thư viện chuyên về xử lý các tương tác với bảng biểu (Tables) cũng như giúp bảng biểu thể hiện đẹp mắt hơn với người dùng. Bạn có thể tìm hiểu thêm thư viện này ở địa chỉ https://datatables.net/. Để thực hiện cài đặt DataTables vào Bootstrap 4, bạn chỉ cần thêm đúng 3 thư viện sau vào phần Header của trang web bên cạnh các thư viện của Bootstrap khác. Các tập tin của DataTables cần nhúng đó là: jquery.dataTables.min.js, dataTables.bootstrap4.min.js và dataTables.bootstrap4.min.css. DataTables cũng hoạt động với Bootstrap 3, nhưng chúng ta không sử dụng trong bài này.jquery.dataTables.min.js, dataTables.bootstrap4.min.js và dataTables.bootstrap4.min.css. DataTables cũng hoạt động với Bootstrap 3, nhưng chúng ta không sử dụng trong bài này.
Kết hợp với Bootstrap 4Bạn tạo một bảng biểu (Table) trong Bootstrap 4 như bình thường, sau đó chèn 1 đoạn script JQuery nhỏ ở đầu trang như trong ví dụ sau. Trong ví dụ, bạn có thể thấy dòng $(‘#example’).dataTable({}) dùng để gọi bảng có id=”example” để nhúng vào thư viện DataTables và chuyển thành dạng bảng được phân trang.id=”example” để nhúng vào thư viện DataTables và chuyển thành dạng bảng được phân trang.
Cấu hình nhãn tiếng ViệtCó nhiều cách để cấu hình nhãn tiếng Việt nhưng cách tốt nhất chính là ghi đè cấu hình các nhãn trong bảng như sau. Bạn làm việc này chủ yếu ở phần script và cấu hình nhãn theo ý muốn.
Cấu hình các thông số mặc địnhNgoài ra, bạn còn có thể cấu hình các thông số mặc định khác như số trang, sắp xếp cột,… Tất cả các thao tác này đều thực hiện thông qua đoạn script nhỏ nằm đầu trang như sau. Kết luậnThông qua bài viết hi vọng bạn học hỏi thêm nhiều điều về phân trang trong Bootstrap 4 và kết hợp các thư viện, framework khác để có giao diện Web đa dạng hơn. |
