How can I refresh table content with jQuery ajax?

Viewed 169

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.

1 Answers

Move your table and pagination to separate file(including pagination) like views/partials/table.blade.php.Then in your controllers method for ajax call create an actual HTML and return it to AJAX:

$html = view('partials.table', compact('data'))->render();
return response()->json(['html' => $html]);

And the final step is to replace current HTML with response data which you will get in AJAX success callback.

Related