I want to have a basic table that changes the content dynamically when the user selects a different company from a dropdown. The table will only load the data from the selected company only and via AJAX. The table will also be applied some filters such as the department name filter, and I would love to still keep that functionality as well as the pagination link which is using Laravel built-in links. Here is some snippet code that I have.
HTML Table
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col"
class="px-6 py-3 text-left text-xs font-medium text-black uppercase tracking-wider">
No.
</th>
<th scope="col"
class="px-6 py-3 text-left text-xs font-medium text-black uppercase tracking-wider">
Form Enquiry Name
</th>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
@forelse ($data as $item)
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">{{ $data->firstItem() + $loop->index }}.</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="text-sm font-medium text-gray-900">
ID #{{ $item->id }}
</div>
</div>
<span class="inline-flex text-xs leading-5 font-semibold rounded-full text-gray-500">
{{ $item->name }}
</span>
</td>
</tr>
</tbody>
Controller
public function index(Request $request)
{
$company= $request->Company;
$data = FormEnquiry::orderByDesc('created_at')
->where('name', 'LIKE', "%{$company}%")
->where('created_by', Auth::user()->id)
->simplePaginate(5);
return view('form.form-enquiry.index', ['data'=>$data, 'formName'=>$request->formName, 'deptId'=>$request->deptId, 'company'=>$company]);
}
May I know what is the best way to make the table loads data dynamically when the company dropdown is selected differently? And how would I ensure that the pagination doesn't break if any and still able to do search functionality filter.