<code><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css"></code>

<code><script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script></code>

npm install datatables.net    # Core library
npm install datatables.net-dt # Styling

var $  = require( 'jquery' );
var dt = require( 'datatables.net' )();

$(document).ready( function () {
    $('#table_id').DataTable();
} );

$('#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
});

$('#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",
        }
    },
});

$('#table-product').DataTable({
    processing: true,
    serverSide: true,
    ajax: {
        url: '/admin/products',
        dataType: 'json',
        type: 'GET',
    },
});

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"
]

public function index(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 DESC
        if (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 ($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');
}