datatable la gi

By Admin 30/08/2023 0

Giới thiệu

  • Datatable là 1 trong viện thư viết lách vị javascript hỗ trợ cho việc truy vấn tài liệu trong số bảng HTML.
  • Có 2 loại người tiêu dùng tương tác với hình mẫu phần mềm:
  • Người người sử dụng cuối: Những người tiêu dùng hình mẫu Datatables, VD: Tìm lần, coi giới hận record bên trên 1 màn hình hiển thị, bố trí, phân trang ...
  • Người phân phát triển: Những người thao tác làm việc với Datatable sẽ tạo phần mềm, service ....

Cài đặt

npm install datatables.net    # Vi xử lý Core library
npm install datatables.net-dt # Styling

var $  = require( 'jquery' );
var dt = require( 'datatables.net' )();
  • Để dùng tao chỉ việc bịa id cho tới table và người sử dụng jQuery nhằm gọi công thức DataTable()
$(document).ready( function () {
    $('#table_id').DataTable();
} );

Một số tùy chọn

  • Điều chỉnh những thanh control bên trên table
$('#table-product').DataTable({
    data: this.products, // Dữ liệu dùng làm hiển thị cho tới bảng, hoàn toàn có thể là array, object ...
    columns: [
        { data: 'product_category.name' },
        { data: 'name' },
        { data: 'slug' },
        { data: 'quantity' },
        { data: 'price' },
    ], // Các tính chất của product tiếp tục  match với từng collumn
    searching: false, // Mặc lăm le là true, mix false nhằm tắt tính năng search
    ordering:  false, // Mặc lăm le là true, mix false nhằm tắt tính năng bố trí theo dõi collumn
    paging: false, // Mặc lăm le là true, mix false nhằm tắt tính năng phân trang
    scrollX: 400, // Nội dụng của table tiếp tục hiện nay thị với with 400px, Nếu vượt lên trên thì sẽ sở hữu được thanh scroll
    scrollY: 400, // Nội dụng của table tiếp tục hiện nay thị với hieght 400px, Nếu vượt lên trên thì sẽ sở hữu được thanh scroll
    processing: true,
    info: false, // Tắt vấn đề về table VD: Showing 1 vĩ đại 14 of 14 entries
});

  • Kết quả

  • Thay thay đổi ngôn ngữ

$('#table-product').DataTable({
    language: {
        processing: "Message khi đang được chuyển vận dữ liệu",
        search: "Placeholder của input lần kiếm",
        lengthMenu: "Điều chỉnh con số bạn dạng ghi bên trên 1 trang _MENU_ ",
        info: "Bản ghi kể từ _START_ cho tới _END_ Tổng công _TOTAL_ bạn dạng ghi",
        infoEmpty: "Khi không tồn tại tài liệu, Hiển thị 0 bạn dạng ghi nhập 0 tổng số 0 ",
        infoFiltered: "(Message bổ sung cập nhật cho tới info lúc không tìm kiếm được record nào là _MAX_)",
        infoPostFix: "Alo Alo", // Cái này khi thêm vô nó sẽ bị đứng sau info
        loadingRecords: "",
        zeroRecords: "Khi lần tìm tòi ko match với record nào",
        emptyTable: "Không sở hữu dữ liệu",
        paginate: {
            first: "Trang đầu",
            previous: "Trang trước",
            next: "Trang sau",
            last: "Trang cuối"
        },
        aria: {
            sortAscending: ": Message khi đang được bố trí theo dõi column",
            sortDescending: ": Message khi đang được bố trí theo dõi column",
        }
    },
});
  • Kết quả

Server side

  • Khi dùng syntax ('#table-product').DataTable() thì những thao tác lần lần, phân trang, bố trí... đều được xử lý ở phía Client.
  • Điều này quí phù hợp với những table sở hữu con số record nhỏ cỡ < 10.000. Nếu tài liệu quá rộng thì cách tiến hành vì vậy ko chất lượng vì thế server cần trả về con số record rất rộng.
  • Do cơ nên dùng server side, tức là lúc sở hữu ngẫu nhiên đòi hỏi nào là như lần lần, phân trang, bố trí thì đều gửi request lên server và trả về tài liệu quan trọng.
  • Để dùng tính năng này nhập table tao cần thiết kích hoạt như sau.
$('#table-product').DataTable({
    processing: true,
    serverSide: true,
    ajax: {
        url: '/admin/products',
        dataType: 'json',
        type: 'GET',
    },
});
  • Khi dùng tính năng lần lần, bố trí, phân trang ... thì Client tiếp tục gửi request lên server. VD:
array:7 [
  "draw" => "2"
  "columns" => array:5 [
    0 => array:5 [
      "data" => "product_category.name"
      "name" => null
      "searchable" => "true"
      "orderable" => "true"
      "search" => array:2 [
        "value" => null
        "regex" => "false"
      ]
    ]
    1 => array:5 [
      "data" => "name"
      "name" => null
      "searchable" => "true"
      "orderable" => "true"
      "search" => array:2 [
        "value" => null
        "regex" => "false"
      ]
    ]
    2 => array:5 [
      "data" => "slug"
      "name" => null
      "searchable" => "true"
      "orderable" => "true"
      "search" => array:2 [
        "value" => null
        "regex" => "false"
      ]
    ]
    3 => array:5 [
      "data" => "quantity"
      "name" => null
      "searchable" => "true"
      "orderable" => "true"
      "search" => array:2 [
        "value" => null
        "regex" => "false"
      ]
    ]
    4 => array:5 [
      "data" => "price"
      "name" => null
      "searchable" => "true"
      "orderable" => "true"
      "search" => array:2 [
        "value" => null
        "regex" => "false"
      ]
    ]
  ]
  "order" => array:1 [
    0 => array:2 [
      "column" => "0"
      "dir" => "asc"
    ]
  ]
  "start" => "0"
  "length" => "10"
  "search" => array:2 [
    "value" => "1"
    "regex" => "false"
  ]
  "_" => "1578925228907"
]
  • Bây giờ bản thân tiếp tục xử lý đòi hỏi, đó là fn tôi đã xử lý đòi hỏi.
public function index(Request $request)
{
    if ($request->ajax()) {
        $total_data = Product::count(); // Đếm số record nhập bảng product
        $col_order = ['name', 'slug', 'quantity', 'price']; // Định nghĩa list những cột ứng với table
        $limit = (int)$request->input('length'); // Giới hạn con số bạn dạng ghi bên trên page
        $start = (int)$request->input('start'); // Bắt đầu kể từ record loại mấy
        $order = $col_order[(int)$request->input('order.0.column')]; // Xác lăm le cột bố trí.
        $dir = $request->input('order.0.dir'); // Sắp xếp theo dõi ASC hoặc DESC
        if (empty($request->input('search.value'))) { // Nếu không tồn tại tài 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 ($products as $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,
        ];

        return response()->json($result);
    }

    return view('admin.product.index');
}
  • Kết quả

Kết luận

  • Trên đó là những share của tôi về datatable một tủ sách vô cùng tiện lợi khi thao tác làm việc với table.
  • Ngoài đi ra còn thật nhiều loại hoặc ho không giống của datable, những chúng ta có thể tìm hiểu thêm tăng bên trên trang chủ bên trên trên đây.