$('#table-product').DataTable({
data:this.products,// Dữ liệu dùng để hiển thị cho bảng, có thể là array, object ...
columns:[{ data:'product_category.name'},{ data:'name'},{ data:'slug'},{ data:'quantity'},{ data:'price'},],// Các thuộc tính của product sẽ match với từng collumn
searching:false,// Mặc định là true, set false để tắt chức năng search
ordering:false,// Mặc định là true, set false để tắt chức năng sắp xếp theo collumn
paging:false,// Mặc định là true, set false để tắt chức năng phân trang
scrollX:400,// Nội dụng của table sẽ hiện thị với with 400px, Nếu quá thì sẽ có thanh scroll
scrollY:400,// Nội dụng của table sẽ hiện thị với hieght 400px, Nếu quá thì sẽ có thanh scroll
processing:true,
info:false,// Tắt thông tin về table VD: Showing 1 to 14 of 14 entries});
Kết quả
Thay đổi ngôn ngữ
$('#table-product').DataTable({
language:{
processing:"Message khi đang tải dữ liệu",
search:"Placeholder của input tìm kiếm",
lengthMenu:"Điều chỉnh số lượng bản ghi trên 1 trang _MENU_ ",
info:"Bản ghi từ _START_ đến _END_ Tổng công _TOTAL_ bản ghi",
infoEmpty:"Khi không có dữ liệu, Hiển thị 0 bản ghi trong 0 tổng cộng 0 ",
infoFiltered:"(Message bổ sung cho info khi không search đc record nào _MAX_)",
infoPostFix:"Alo Alo",// Cái này khi thêm vào nó sẽ đứng sau info
loadingRecords:"",
zeroRecords:"Khi tìm kiếm không match với record nào",
emptyTable:"Không có dữ liệu",
paginate:{
first:"Trang đầu",
previous:"Trang trước",
next:"Trang sau",
last:"Trang cuối"},
aria:{
sortAscending:": Message khi đang sắp xếp theo column",
sortDescending:": Message khi đang sắp xếp theo column",}},});
Kết quả
Server side
Khi sử dụng syntax ('#table-product').DataTable() thì các thao tác tìm kiếm, phân trang, sắp xếp... đều được xử lý ở phía Client.
Điều này thích hợp với các table có số lượng record nhỏ cỡ < 10.000. Nếu dữ liệu quá lớn thì cách làm như vậy không tốt vì server phải trả về số lượng record rất lớn.
Do đó nên sử dụng server side, tức là khi có bất kỳ yêu cầu
nào như tìm kiếm, phân trang, sắp xếp thì đều gửi request lên server và trả về dữ liệu cần thiết.
Để sử dụng chức năng này trong table ta cần kích hoạt như sau.
Bây giờ mình sẽ xử lý yêu cầu, đây là fn mình đã xử lý yêu cầu.
publicfunctionindex(Request$request){if($request->ajax()){$total_data=Product::count();// Đếm số record trong bảng product$col_order=['name','slug','quantity','price'];// Định nghĩa danh sách các cột tương ứng với table$limit=(int)$request->input('length');// Giới hạn số lượng bản ghi trên page$start=(int)$request->input('start');// Bắt đầu từ record thứ mấy$order=$col_order[(int)$request->input('order.0.column')];// Xác định cột sắp xếp.$dir=$request->input('order.0.dir');// Sắp xếp theo ASC hay DESCif(empty($request->input('search.value'))){// Nếu không có dữ liệu search$products=Product::with('productCategory')->offset($start)->limit($limit)->orderBy($order,$dir)->get();$total_filter=count($products);}else{$search=$request->input('search.value');$products=Product::with('productCategory')->where('name','like',"%{$search}%")->orWhere('slug','like',"%{$search}%")->orWhere('quantity','like',"%{$search}%")->orWhere('price','like',"%{$search}%")->offset($start)->limit($limit)->orderBy($order,$dir)->get();$total_filter=count($products);}$data=[];foreach($productsas$key=>$product){// Định dạng lại dữ liệu$tempt['category']=$product->productCategory->name;$tempt['name']=$product->name;$tempt['slug']=$product->slug;$tempt['quantity']=$product->quantity;$tempt['price']=$product->price;array_push($data,$tempt);}$result=['draw'=>(int)$request->input('draw'),'recordsTotal'=>(int)$total_data,'recordsFiltered'=>(int)$total_data,'data'=>$data,];returnresponse()->json($result);}returnview('admin.product.index');}
Kết quả
Kết luận
Trên
đây là những chia sẻ của mình về datatable một thư viện rất tiện ích khi làm việc với table.
Ngoài ra còn rất nhiều thứ hay ho khác của datable, các bạn có thể tham khảo thêm tại trang chủ tại đây.