Releases: rmunate/EasyDataTable
V 2.1.0
EasyDataTable:
A Fast and Efficient Way to Create BackEnd for Any DataTable in the Laravel PHP Framework
Are you tired of the hassle of handling DataTables in your Laravel projects? Say goodbye to the complexity! EasyDataTable is here to streamline your backend processes.
With EasyDataTable, you can harness the power of Laravel's Query Builder to swiftly and effortlessly create tables with all the features you need, as demanded by DataTables.
Documentation
Installation
When you wish to use this solution, you must ensure the following:
PHP: Version equal to or higher than 7.4
Laravel Framework: Version equal to or higher than 8.0
To install the dependency via Composer, run the following command:
composer require rmunate/easy-datatableLicense
This project is under the MIT License.
🌟 Support My Projects! 🚀
Make any contributions you see fit; the code is entirely yours. Together, we can do amazing things and improve the world of development. Your support is invaluable. ✨
If you have ideas, suggestions, or just want to collaborate, we are open to everything! Join our community and be part of our journey to success! 🌐👩💻👨💻
V 2.0.1
EasyDataTable:
A Fast and Efficient Way to Create BackEnd for Any DataTable in the Laravel PHP Framework
Are you tired of the hassle of handling DataTables in your Laravel projects? Say goodbye to the complexity! EasyDataTable is here to streamline your backend processes.
With EasyDataTable, you can harness the power of Laravel's Query Builder to swiftly and effortlessly create tables with all the features you need, as demanded by DataTables.
Documentation
Installation
When you wish to use this solution, you must ensure the following:
PHP: Version equal to or higher than 7.4
Laravel Framework: Version equal to or higher than 8.0
To install the dependency via Composer, run the following command:
composer require rmunate/easy-datatableLicense
This project is under the MIT License.
🌟 Support My Projects! 🚀
Make any contributions you see fit; the code is entirely yours. Together, we can do amazing things and improve the world of development. Your support is invaluable. ✨
If you have ideas, suggestions, or just want to collaborate, we are open to everything! Join our community and be part of our journey to success! 🌐👩💻👨💻
V 2.0.0
EasyDataTable:
A Fast and Efficient Way to Create BackEnd for Any DataTable in the Laravel PHP Framework
Are you tired of the hassle of handling DataTables in your Laravel projects? Say goodbye to the complexity! EasyDataTable is here to streamline your backend processes.
With EasyDataTable, you can harness the power of Laravel's Query Builder to swiftly and effortlessly create tables with all the features you need, as demanded by DataTables.
Documentation
Installation
When you wish to use this solution, you must ensure the following:
PHP: Version equal to or higher than 7.4
Laravel Framework: Version equal to or higher than 8.0
To install the dependency via Composer, run the following command:
composer require rmunate/easy-datatableLicense
This project is under the MIT License.
🌟 Support My Projects! 🚀
Make any contributions you see fit; the code is entirely yours. Together, we can do amazing things and improve the world of development. Your support is invaluable. ✨
If you have ideas, suggestions, or just want to collaborate, we are open to everything! Join our community and be part of our journey to success! 🌐👩💻👨💻
V 1.6.1
V 1.6.0
With Data Preparated
You can send data from a array or a collection to the front, for example:
Array:1 [
0 => array:41 [
"status" => "A"
"name" => "JOHN ALEJANDRO DIAZ PINILLA"
"born_day" => "1993-11-30"
"scheduler" => "Sheduler 235 Hour"
]
]
Collection {
0 => array:41 [
"status" => "A"
"name" => "CARLOS GIOVANNY RODRIGUEZ TRIVIÑO"
"born_day" => "1992-10-19"
"scheduler" => "Scheduler 235 Hour"
]
}For the send to the front, you must use the method fromData(), and put the array or the collection in the parameters.
$dataTable = new EasyDataTable();
/* The array or collection of data must be sent to the method. */
$dataTable->fromData($plantaActiva); /* Mandatory / Required */
$dataTable->map(function ($row) {
return [
"status" => $row->status,
"name" => $row->name,
"born_day" => $row->born_day,
"scheduler" => $row->scheduler,
];
});this method work like the clientSide method, in this way the javascript is the same than the clientSide.
V 1.5.0
The reading of the Request is adjusted to support the jl-datatable library (https://github.com/jhonijlm/jl-datatable?ref=vuejsexamples.com) in VUE.JS
V 1.4.1
V 1.4.0
EasyDataTable: A Fast and Efficient Way to Create BackEnd for Any DataTable in the Laravel PHP Framework (v1.x)
⚙️ This library is compatible with Laravel versions +8.0 and also provides support for the Metronic theme in its versions +8.0 ⚙️
Table of Contents
Introduction
EasyDataTable arises from the need to standardize the backend for different DataTables commonly used in Laravel projects. This package offers a convenient way to work with Laravel's built-in Query Builder to generate tables quickly and easily with all the capabilities required by DataTables.
It also provides support for DataTables in Metronic themes.
V 1.3.0
V 1.2.0
EasyDataTable: A fast, easy, and efficient way to create the BackEnd for any DataTable. (Laravel PHP Framework) | v1.x
----Documentación En Español----
Table of Contents
Introduction
EasyDataTable was born out of the need to standardize the backend for different DataTables commonly used in our Laravel projects. This package offers a convenient way to work with the built-in Query Builder in the Laravel framework to generate tables quickly with all the capabilities required by DataTables.
Installation
To install the package via Composer, run the following command:
composer require rmunate/easy-datatableTable Types
| Type | Description |
|---|---|
| ClientSide | This type of table is used when we send all the data to the FrontEnd, and it is responsible for organizing, filtering, and generating any type of interactivity with the table. However, this type is not recommended for large volumes of data, as the client's experience may be affected while the library renders all the data, which could take a considerable amount of time. |
| ServerSide | This type of table is used to handle high volumes of data. It only loads a limited amount of data from the backend on each interaction with the table. Commonly, it renders data in chunks, for example, up to a maximum of 100 records, depending on the table's pagination settings on the FrontEnd. In conclusion, this type of table is highly recommended if you want to maintain a fast and efficient interaction with the application. |
Client Side
Let's see how to create the backend for a ClientSide table.
Route
Define a GET route without sending any arguments, similar to what is shown below. If you want to download the example, you can find it here.
Route::get('/module/datatable', [ModuleController::class, 'dataTable']);Controller
Now that we have the route, let's proceed to create the method in the corresponding controller. This method will always handle Query Builder. For now, using Eloquent is not possible, as we need to know the column names to be rendered on the FrontEnd, and Query Builder offers more convenient ways to standardize it.
<?php
//Import the use of the library.
use Rmunate\EasyDatatable\EasyDataTable;
//...
/*
In the Request, you can send conditions for the query if required; otherwise, you can omit it.
*/
public function dataTable(Request $request)
{
/*
The first thing we will do is create our query using Query Builder.
An important step is to use the "select" method, where you define the columns to select.
You can assign a different alias to the column name of the database table if you wish.
Below is an example of how to generate a query with some relationships.
*/
$query = DB::table('novedades')
->leftJoin('tipo_novedades', 'tipo_novedades.id', '=', 'novedades.tipo_novedad_id')
->leftJoin('empleados', 'empleados.id', '=', 'novedades.empleado_id')
->select(
'empleados.cedula AS identification',
'empleados.nombre AS employee',
'tipo_novedades.nombre AS novelty_type',
'novedades.descripcion AS description',
'novedades.dias_calendario AS calendar_days',
'novedades.dias_habiles AS business_days',
'novedades.fecha_inicial AS initial_date',
'novedades.fecha_final AS final_date',
)
->where('empleados.empresa', $request->company); /* (Optional) Only if you need to apply your conditions */
/*
(Optional)
Sometimes we need to send additional information, such as permissions, to determine if row values can be altered.
In such cases, we can create variables with the additional data we want to send to the front end.
In the current example, I will only check if the logged-in user has edit permissions.
*/
$permissionEdit = Auth::user()->can('novedades.editar');
/*
Now let's start using the library. The first thing we'll do is create an object with an instance of EasyDataTable.
*/
$datatable = new EasyDataTable();
/*
Now we'll define that we want to create the data for a "ClientSide" type.
*/
$datatable->clientSide();
/*
Next, using the "query" method, we'll send the QueryBuilder query, which, as you can see, does not have any final methods.
You would commonly use "get" to retrieve data, but in this case, you should not use it; instead, send the QueryBuilder instance to the library.
*/
$datatable->query($query);
/*
(Optional)
The "map" method is not mandatory; you can omit it if you want to render the data on the front end exactly as it is returned from the database.
However, if you want to apply specific formats and add columns or data, you can do something like this.
*/
$datatable->map(function($row) use ($permissionEdit){
/*
Note that within the "map" method, the "$row" alias represents the treatment of each line of the table to be returned.
Additionally, through the "use" statement, you can pass additional variables to the library's context,
which you need for data treatment or to add them as additional columns.
As you can see, the variable "$row" allows us to access each of the aliases created in our query.
It is essential that the array indices to be returned in this method match the aliases used in the QueryBuilder query.
If you notice, only the additional columns to be returned have names that are not consistent with the aliases set in the QueryBuilder query.
*/
return [
'identification' => $row->identification,
'employee' => strtolower($row->employee),
'novelty_type' => strtolower($row->novelty_type),
'description' => strtolower($row->description),
'calendar_days' => $row->calendar_days,
'business_days' => $row->business_days,
'initial_date' => date('d/m/Y', strtotime($row->initial_date)),
'final_date' => date('d/m/Y', strtotime($row->final_date)),
"action" => [
"editar" => $permissionEdit
]
];
});
/*
Finally, using the "response" method, you'll get the response required by the FrontEnd to render the data.
*/
return $datatable->response();
}JavaScript
Below is a basic example of DataTable configuration for the FrontEnd. Here, it's a matter of using what DataTable offers as a JavaScript library.
// First, we need to initialize the table with the DataTable() function.
// The selector '#datatable' should be the ID or class of the table in the HTML.
var dataTable = $('#datatable').DataTable({
processing: true, // Enable processing indicator
responsive: true, // Enable responsive design functionality
pagingType: "full_numbers", // Show all pagination controls
/* Here, you have two options to get the data for the table: */
// OPTION 1: Save the backend response in a variable and use the "data" property to pass the values to the DataTable.
// data: dataBackEnd,
// OPTION 2: Use the Ajax property to get the data from a URL on the backend.
ajax: {
url: baseUrl + '/module/datatable', // Change the URL that returns data in JSON format here
dataSrc: 'data' // Specify the property that contains the data in the JSON response
},
/* Next, we define the table columns and the data we want to display in each column. */
columns: [
{ data: "identification" },
{ data: "employee" },
{ data: "novelty_type" },
{ data: "description" },
{ data: "calendar_days" },
{ data: "business_days" },
{ data: "initial_date" },
{ data: "final_date" },
{ data: "action",
/* The "render" method allows you to customize how the content of a column is displayed. */
render: function (data, type, row, meta) {
let btnEdit = '';
// In the current example, we validate the edit permission to render a button with the edit action.
if (data.editar) {
btnEdit = `<button class="btn btn-sm btn-info btn-edit" data-id="${row.identification}" data-employee="${row.employee}" title="Edit">
<i class="fa flaticon-edit-1"></i>
</button>`;
}
return `<div class='btn-group'>${btnEdit}</div>`;
},
orderable: false // Specify if the column is sortable or not.
}
],
/* Finally, we configure the language of the table using the corresponding translation file. */
language: {
url: "https://cdn.datatables.net/plug-ins/1.13.5/i18n/es-ES.json"
}
});HTML
In the HTML, you should have a structure similar to the following. Make sure that the number of columns defined in th...