Laravel Datatables

example.php

  <?php
  //... 
  public function productsTable() {

        $query = \DB::table('products')->leftJoin('brands', 'brands.id', '=', 'products.brand_id')
            ->select([\DB::raw("CONCAT(products.name, ' ', products.code) as full_name"),'products.slug','price','brands.name as brand','products.id']);
                    return datatables($query)

                        ->addColumn('action', function ($row) {
                            return '<a href="'.$row->id.'" class="btn btn-sm btn-primary">Edit'.$row->id.'</a>';
                        })

                        ->addColumn('slug', function ($row) {
                            return '<a href="'.$row->slug.'">'.$row->slug.'</a>';
                        })
                        ->rawColumns(['slug', 'action'])

                        ->filterColumn('full_name', function($query, $keyword) {
                            $query->whereRaw("CONCAT(products.name, ' ', products.code) like ?", ["%{$keyword}%"]);
                        })
                        ->filterColumn('products.price', function($query, $keyword) {
                            $query->where('price', '=', $keyword);
                        })
                        ->filterColumn('products.slug', function($query, $keyword) {
                            $keyword = trim(trim(trim($keyword,',')),',');
                            if (strpos($keyword, ',')>0){
                                $arr = array_map('trim', explode(',',$keyword));
                                $query->whereIn('products.slug', $arr);
                            } else {
                                $query->where('products.slug', '=', $keyword);
                            }
                        })
            ->toJson();
    }

index.html

    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>

    <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css" rel="stylesheet">

    <div class="container">
            <table id="yajra" class="table table-bordered table-striped">
                <thead class="thead-dark">
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Slug</th>
                    <th>Price</th>
                    <th>Brand</th>
                    <th>action</th>
                </tr>
                </thead>
                <tfoot>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Slug</th>
                    <th>Price</th>
                    <th>Brand</th>
                    <th>action</th>
                </tr>
                </tfoot>
            </table>
        </div>
    <script>
        $(document).ready(function(){
            $('#yajra tfoot th').each( function () {
                var title = $(this).text();
                $(this).html( '<input type="text" class="input is-small" placeholder="Search '+title+'" />' );
            } );
            var table = $("#yajra").DataTable({
                serverSide: true,
                ajax: "{{ route('yajra') }}",
                "order": [[0, "desc"]],
   
                columns: [
                    { data: 'id', name: 'products.id', 'sortable': true, 'searchable': false, 'visible': false, 'type': 'num'},
                    { data: 'full_name', name: 'full_name'},
                    { data: 'slug', name: 'products.slug'},
                    { data: 'price', name: 'products.price'},
                    { data: 'brand', name: 'brands.name'},
                    { data: 'action', name: 'action'},
                ],
            });

            // Apply the filter
            $("#yajra tfoot input").on( 'keyup change', function () {
                table
                    .column( $(this).parent().index()+':visible' )
                    .search( this.value )
                    .draw();
            } );
        });
    </script>