# 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/)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://helpdocs.quickadminpanel.com/modules/ajax-datatables-module.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.