# AJAX Datatables

QuickAdminPanel uses [Datatables.net](https://datatables.net/) for listing the data. By default, it accepts **all entries** from the database, and then JavaScript takes care of pagination, search, filtering, ordering etc.

 And it is a problem for bigger amount of data, thousands of entries could slow down the page load significantly.

 This **AJAX Datatables** module uses the data loading page by page, at the time that it's needed, via AJAX.

 It's also called [Server-side processing](https://datatables.net/examples/data_sources/server_side.html) - Datatables script accept the URL of separate API script which actually loads the data.

```
$('#example').DataTable( {
    "processing": true,
    "serverSide": true,
    "ajax": "../server_side/scripts/server_processing.php"
} );
```

## How does the result look in QuickAdminPanel code?

 Without this module, generated code looks something like this.

 **Controller:**

```
public function index()
{
    $courses = Course::all();
    return view('admin.courses.index', compact('courses'));
}
```

 **View:**

```
<table class="table datatable">
<thead>
	<tr>
		<th>...</th>
		<th>...</th>
		<th>...</th>
		<th>...</th>
	</tr>
</thead>

<tbody>
@if (count($courses) > 0)
    @foreach ($courses as $course)
	<tr>
		<td>...</td>
		<td>...</td>
		<td>...</td>
		<td>...</td>
	</tr>
	@endforeach
@else
	<tr>
		<td colspan="4">No courses.</td>
	</tr>
@endif
</tbody>
</table>
```

&#x20;**JavaScript:**

```
$('.datatable').each(function () {
    $(this).dataTable(window.dtDefaultOptions);
});
```

&#x20;Now, imagine if there were 5000 courses in the table. It would put a heavy load on the browser with JavaScript trying to paginate and filter the data inside of the datatables.

&#x20;So how does it look with **AJAX Datatables**?

&#x20;**composer.json:**

```
...
"yajra/laravel-datatables-oracle": "^9.0",
...
```

&#x20;**Controller:**

```
public function index()
{
    if (request()->ajax()) {
        $query = Course::query();
        $query->with("teachers");
        $template = 'actionsTemplate';
        $table = Datatables::of($query);

        $table->addColumn('actions', ' ');
        $table->editColumn('actions', function ($row) use ($template) {
            $gateKey  = 'course_';
            $routeKey = 'admin.courses';
            return view($template, compact('row', 'gateKey', 'routeKey'));
        });

        // ... More columns described

        $table->editColumn('published', function ($row) {
            return \Form::checkbox("published", 1, $row->published == 1, ["disabled"]);
        });

        return $table->make(true);
    }

    return view('admin.courses.index');
}
```

&#x20;**View:**

```
<table class="table ajaxTable">
<thead>
	<tr>
		<th>...</th>
		<th>...</th>
		<th>...</th>
		<th>...</th>
	</tr>
</thead>
</table>
```

&#x20;**JavaScript:**

```
$('.ajaxTable').each(function () {
    window.dtDefaultOptions.processing = true;
    window.dtDefaultOptions.serverSide = true;
    $(this).DataTable(window.dtDefaultOptions);
});
```

&#x20;As you can see, a lot more logic now goes into **Controller** - it processes AJAX call to the API and parses the column.\
&#x20;In the Blade file the table itself is empty - there are no tr's or td's, it's all loaded via AJAX.

&#x20;In other words, whole page is loaded really fast with empty table, and then after a while the data is being loaded.

&#x20;We use [Laravel Datatables](https://github.com/yajra/laravel-datatables) package for this function.

## How to install/use the module?

&#x20;First, you go to your panel's **Modules** menu item, find the module in the list and click **Install**:

![](https://laraveldaily.com/wp-content/uploads/2019/03/modules-ajax-datatables-install.png)

&#x20;Then, you can switch AJAX function on-off for every CRUD - in Create/Edit menus, you will have a special checkbox for that:

![](https://laraveldaily.com/wp-content/uploads/2019/03/modules-ajax-datatables-crud.png)

## More information

* [Datatables.net](https://datatables.net/)
* [Server-side processing in Datatables](https://datatables.net/examples/data_sources/server_side.html)
* [Laravel Datatables package](https://github.com/yajra/laravel-datatables)

## From Our Blog

* [How to Customize Datatables: 6 Most-Requested Tips](https://quickadminpanel.com/blog/how-to-customize-datatables-6-most-requested-tips/)
* [Advanced Datatables with Laravel: Five Code Examples](https://quickadminpanel.com/blog/advanced-datatables-with-laravel-five-code-examples/)
* [Why you need AJAX (Server-Side) Datatables?](https://quickadminpanel.com/blog/why-you-need-ajax-server-side-datatables/)
* [AJAX Datatables: Move View/Edit/Delete Column from Right to Left Side](https://quickadminpanel.com/blog/ajax-datatables-move-vieweditdelete-column-from-right-to-left-side/)