AJAX Datatables

QuickAdminPanel uses 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 - 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>

JavaScript:

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

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.

So how does it look with AJAX Datatables?

composer.json:

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

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');
}

View:

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

JavaScript:

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

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

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

We use Laravel Datatables package for this function.

How to install/use the module?

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

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

More information

• Datatables.net
• Server-side processing in Datatables
• Laravel Datatables package

From Our Blog

• How to Customize Datatables: 6 Most-Requested Tips
• Advanced Datatables with Laravel: Five Code Examples
• Why you need AJAX (Server-Side) Datatables?
• AJAX Datatables: Move View/Edit/Delete Column from Right to Left Side