1. Giới thiệu:

Sau khi tham gia một số dự án web sử dụng thư viện JavaScript DataTable mình đã biết đến Ajax DataTable với những chức năng tiện lợi cho một dữ liệu không quá lớn.

Ưu điểm: Thư viện giúp lấy dữ liệu nhanh, tự phân trang, tìm kiếm cơ bản mà không cần phải reload lại trang web khi sử dụng Ajax DataTable.

Khuyết điểm: JavaScript Datatable có một khuyết điểm là tải dữ liệu chậm nếu dữ liệu quá lớn vì nó không thật sự lấy theo số dòng dữ liệu mà bạn đặt ra. Bạn phải đưa toàn bộ bảng dữ liệu cho nó, nó sẽ tự phân trang lại theo cấu hình của bạn.

Trong bài viết này mình sẽ hướng dẫn các bạn sử dụng Ajax DataTable và một số thủ thuật nhỏ như tắt báo lỗi khi lấy dữ liệu không thành công hay tự động lấy lại dữ liệu khi lấy dữ liệu thất bại.

2. Thủ thuật:

Ẩn thông báo lỗi: Để ẩn thông báo lỗi do lấy dữ liệu không được hoặc trong quá trình đỗ dữ liệu vào bị lỗi. Bạn chỉ cần thêm đoạn code sau vào phía trước hàm cấu hình Datatable.

$.fn.dataTable.ext.errMode = 'none';

Dưới đây là đoạn code sử dụng Ajax DataTable và tự lấy lại dữ liệu nếu thất bại.

Trong đoạn code tôi có thêm đếm số lần lấy lại và giới hạn không quá 10 lần. Nếu trường hợp bạn đang kiểm thử có lỗi PHP thì sẽ ảnh hưởng tới việc Server tự ghi log lỗi PHP lại với dung lượng lớn vì hàm sẽ gọi lấy dữ liệu liên tục, điều này sẽ phiền bạn tìm kiếm file log để xóa nó đi.

Nếu bạn đang sử dụng Laravel Framework thì cần thêm csrf-token. Xem chi tiết tại đây.

<script type="text/javascript">	
	var countError = 0; //Tạo biến giới hạn reload ajax khi bị lỗi
	var DataList = $("#DataList").DataTable({
		"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Tất cả"]], //Cấu hình số dòng lấy
		"iDisplayLength": 10, //Số dòng mặc định
		"processing": true, //Cấu hình hiển thị chờ lấy dữ liệu
		"searching": false, //Cấu hình hiển thị tìm kiếm
		"ajax": {
			"url": "<Đường dẫn lấy dữ liệu của bạn>",
			"type": "<Phương thức gửi>", //POST or GET
			"data": data, //Mảng dữ liệu truyền vào nếu có
			//Nếu lấy lỗi sẽ thực hiện lấy lại dữ liệu và không quá 10 lần				
			"error": function (){
				if(countError<9)
					DataList.ajax.reload( null, false );
				countError++;
			}
		},
		//Đỗ dữ liệu vào
		"columns": [
			{data: "<Tên trường dữ liệu>"},
			...
		],
		//Cấu hình cho ngôn ngữ tiếng việt với Bootstrap icon
		"language": {
			"sLengthMenu": "Hiển thị _MENU_ dòng mỗi trang",
			"oPaginate": {
				"sFirst": "",
				"sLast": "",
				"sNext": "",
				"sPrevious": ""
			},
			"sEmptyTable": "Không có dữ liệu",
			"sSearch": "Tìm kiếm:",
			"sZeroRecords": "Không có dữ liệu",
			"sInfo": "Hiển thị từ _START_ đến _END_ trong tổng số _TOTAL_ dòng được tìm thấy",
			"sInfoEmpty" : "Không tìm thấy",
			"sInfoFiltered": " (trong tổng số _MAX_ dòng)",
			"processing": "Đang tải dữ liệu!"
		},
		//Tạo tên class cho hoặc sẽ không sắp xếp cột
		"columnDefs": [ {
			"targets"  : 'no-sort',
			"orderable": false,
		}],
	});
</script>	

Cảm ơn các bạn đã đọc bài viết của mình. Hy vọng bài viết của mình có thể giúp ích cho các bạn đang dùng JavaScript DataTable.

Chúc các bạn thành công!

Chia sẻ: Ngụy Kim Hưng