QuickAdminPanel
Search…
Quick Start: Creating Panel
Using the Generated Code
Modules
Customizing the Code
Vue.js + Laravel API Version
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.
1
$('#example').DataTable( {
2
"processing": true,
3
"serverSide": true,
4
"ajax": "../server_side/scripts/server_processing.php"
5
} );
Copied!
How does the result look in QuickAdminPanel code?
Without this module, generated code looks something like this.
Controller:
1
public function index()
2
{
3
$courses = Course::all();
4
return view('admin.courses.index', compact('courses'));
5
}
Copied!
View:
1
<table class="table datatable">
2
<thead>
3
<tr>
4
<th>...</th>
5
<th>...</th>
6
<th>...</th>
7
<th>...</th>
8
</tr>
9
</thead>
10
11
<tbody>
12
@if (count($courses) > 0)
13
@foreach ($courses as $course)
14
<tr>
15
<td>...</td>
16
<td>...</td>
17
<td>...</td>
18
<td>...</td>
19
</tr>
20
@endforeach
21
@else
22
<tr>
23
<td colspan="4">No courses.</td>
24
</tr>
25
@endif
26
</tbody>
27
</table>
Copied!
JavaScript:
1
$('.datatable').each(function () {
2
$(this).dataTable(window.dtDefaultOptions);
3
});
Copied!
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:
1
...
2
"yajra/laravel-datatables-oracle": "^9.0",
3
...
Copied!
Controller:
1
public function index()
2
{
3
if (request()->ajax()) {
4
$query = Course::query();
5
$query->with("teachers");
6
$template = 'actionsTemplate';
7
$table = Datatables::of($query);
8
9
$table->addColumn('actions', ' ');
10
$table->editColumn('actions', function ($row) use ($template) {
11
$gateKey = 'course_';
12
$routeKey = 'admin.courses';
13
return view($template, compact('row', 'gateKey', 'routeKey'));
14
});
15
16
// ... More columns described
17
18
$table->editColumn('published', function ($row) {
19
return \Form::checkbox("published", 1, $row->published == 1, ["disabled"]);
20
});
21
22
return $table->make(true);
23
}
24
25
return view('admin.courses.index');
26
}
Copied!
View:
1
<table class="table ajaxTable">
2
<thead>
3
<tr>
4
<th>...</th>
5
<th>...</th>
6
<th>...</th>
7
<th>...</th>
8
</tr>
9
</thead>
10
</table>
Copied!
JavaScript:
1
$('.ajaxTable').each(function () {
2
window.dtDefaultOptions.processing = true;
3
window.dtDefaultOptions.serverSide = true;
4
$(this).DataTable(window.dtDefaultOptions);
5
});
Copied!
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.
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
From Our Blog
Last modified 2yr ago