Load DataTable where select in Laravel 8 with yajra datatables

Question

I need to load a DataTable where the input value equals the value in the database. I try to use this function but not work correctly.

Controller

public function getit(Request $request)
{
    $shp_no = $request->shp_no_for_it;
    $data = Item::select('*')->where('shp_no_for_it', $shp_no)->get();
    
    return Datatables::of($data)
        ->addIndexColumn()
        ->addColumn('action', function ($row) {
            $btn = '<a href="javascript:void(0)" 
                class="edit btn btn-primary btn-sm">View</a>';
            
            return $btn;
        })
        ->rawColumns(['action'])
        ->make(true);
}

Script

$('#search_button').click(function(){
    $(function () {
        var table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('getit') }}",
            columns: [
                {data: 'id', name: 'id'},
                {data: 'action', name: 'action', orderable: false, searchable: false},
            ]
        });
    });
});

Input

<input type="title" class="form-control" id="shp_no_for_it" name="shp_no_for_it">

Route

Route::get('getit', [ItemController::class, 'getit'])->name('getit');

Answer 1

Look like you have not passed data in ajax. So first create a function to datatable

function itemDataTable(param={}){
     dataTable = $('#itemTable').DataTable({
        processing: true,
        serverSide: true,

         ajax: {
             url: "{{ route('getit') }}",
             type: 'get',
             headers: { 'content-type': 'application/x-www-form-urlencoded', 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
             data: param,


         },
        columns: [
            {data: 'id', name: 'id'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ]
    });

    return dataTable;
}

Then on page load call data table

$(function () {
  itemDataTable();
});

and on click search button

$('#search_button').click(function(){
    var param={
        shp_no_for_it:$('#shp_no_for_it').val();
    }
    itemDataTable(param)
});

and in controller if you are using server side processing then no need to call get() .But add following

processing: true,
serverSide: true,

and in controller

public function getit(Request $request)
{
    $shp_no = $request->shp_no_for_it;
            $data = Item::select('*') ->where('shp_no_for_it', $shp_no);
            return Datatables::of($data)
                    ->addIndexColumn()
                    ->addColumn('action', function($row){
                            $btn = '<a href="javascript:void(0)" class="edit btn btn-primary btn-sm">View</a>';
                            return $btn;
                    })
                    ->rawColumns(['action'])
                    ->make(true);
}

and in html table

<table class="table table-bordered data-table col-md-12" id="itemTable">