Construindo um Datatatable do lado do servidor personalizado em Laravel sem pacotes

Ao lidar com grandes conjuntos de dados em aplicativos Laravel, a renderização do lado do cliente pode se tornar rapidamente ineficiente. Neste artigo, demonstrarei como implementar o processamento de datatables do lado do servidor do zero, sem depender de pacotes como Yajra Laravel Datatables. Por que construir uma solução personalizada? While packages provide convenience, building your own implementation offers: Complete control over the data processing pipeline Better understanding of the underlying mechanics No dependencies on third-party packages Customized to your specific application needs Project Architecture Our implementation consists of: Backend Service – Handles data processing and filtering Controller – Processes AJAX requests View – Contains the DataTable HTML structure JavaScript – Configures and initializes the DataTable Step 1: Create a DataTable Service Primeiro, vamos criar um serviço dedicado para lidar com o processamento do lado do servidor: namespace app \ Services; use iluminado \ http \ request; use iluminado \ support \ fachades \ schema; classe DatatablesService {Public Function ProcessDatatable ($ Query, Request $ Request, $ colunas): Array {// Obtenha o nome da tabela do consulta $ tableName = $ query-> getModel ()-> getTable (); // Pesquisa de manuseio se ($ request-> tem (‘pesquisa “&&![‘value”)) {
$searchValue = $request->input(‘search”[‘value”
$query->where(function ($query) use ($searchValue, $columns, $tableName) {
foreach ($columns as $column) {
// Check if the column belongs to a related table
if (str_contains($column, ‘.”) {
// Split the column name into relation and column
[$relation, $relatedColumn] = Explode (‘. “$ coluna); // Adicione uma condição na tabela relacionada $ query-> ou em lugares ($ relação, função ($ query) use ($ relacionadoColumn, $ searchValue) {$ query-> where ($ relacionado), como”‘%”htps://dev.to/cammanHoang/n); colunas que não existem na tabela if (schema :: hascolumn ($ tableName, $ colun)) {$ query-> ou onde ($ colun, ‘como “‘%” https://dev.to/cammanHhoang/. $ request-> input (‘ordem “[0]; $ orderbycolumn = $ colunas[$order[‘column”
$orderDirection = $order[‘dir”

if (Schema::hasColumn($tableName, $orderByColumn)) {
$query->orderBy($orderByColumn, $orderDirection);
}
}

// Get total count before pagination
$totalFiltered = $query->count();

// Handle pagination
$start = $request->input(‘start” 0);
$length = $request->input(‘length” 10);
$query->skip($start)->take($length);

// Get filtered count
$totalData = $query->count();

// Prepare response data
return [
‘draw’ => intval($request->input(‘draw”),
‘recordsTotal’ => $totalData,
‘recordsFiltered’ => $totalFiltered,
‘data’ => $query->get(),
]; }} Digite Modo de tela FullScreen Sair Modo de tela cheia Este serviço lida com a funcionalidade principal, incluindo: Pesquisa entre as colunas Pesquisa baseada em relação a dados de classificação de dados Implementando a paginação formatando a resposta para dados de dados Etapa 2: implemente o controlador a seguir, crie um método do controlador para processar o datatable solicitações: Função pública Index ($ request) {if ($-> ajax () {{ [‘id” ‘family_name” ‘first_name” ‘email” ‘created_at” ‘id”
$data = User::select($columns);

$response = $this->dataTableService->processDataTable($data, $request, $columns);
// Add URLs and format fields for each record
$response[‘data” = $response[‘data”->map(function ($user) {
$user->edit_url = route(‘admin.users.edit” $user->id);
$user->destroy_url = route(‘admin.users.destroy” $user->id);
$user->email = ‘ . $user->email . ‘”>’ . $user->email . ‘”
return $user;
});

return response()->json($response);
}

return view(‘admin.users.index”;
}

Enter fullscreen mode

Exit fullscreen mode

The controller:

Checks if the request is an AJAX call
Sets up the columns to query
Passes the query builder to our service
Enhances the response with additional data (URLs, formatted content)
Returns either JSON for AJAX requests or the view for normal requests

Step 3: Create the Blade View with Inline JavaScript

Now let’s create a complete Blade view with the DataTable initialization code included directly:

@extends(‘admin.layouts.master’)
@section(‘title’)
Users
@endsection
@section(‘page-header’)
@component(‘admin.components.page-header’)
@slot(‘title’)
Users List
@endslot
@slot(‘subtitle’)
Users
@endslot
@slot(‘button’)

@endslot
@endcomponent
@endsection

@section(‘center-scripts’)
”
”
@endsection

@section(‘content’)
class=”content”
class=”card”
class=”table datatable-selection-single” id=”user-table”

ID
Last Name
First Name
Email
Created At
class=”text-center”Actions

@endsection

@section(‘scripts’)

// DataTable language configuration
let dataTableLanguage = {
” “https://dev.to/cammanhhoang/Loading…”
” “https://dev.to/cammanhhoang/Search…”
” “https://dev.to/cammanhhoang/_MENU_”
” {
” “https://dev.to/cammanhhoang/First”
” “https://dev.to/cammanhhoang/Last”
” “https://dev.to/cammanhhoang/→”
” ”
},
” ” _MENU_ items”
” {
” “https://dev.to/cammanhhoang/Next”
” ”
},
” “ing _START_ to _END_ of _TOTAL_ items.”
” “https://dev.to/cammanhhoang/_INPUT_”
” ” data to display”
” “ing 0 of 0 items”
” ” from all _MAX_ items”
};

$(document).ready(function () {
// Initialize DataTable directly without a helper function
$(“https://dev.to/cammanhhoang/#user-table”.DataTable({
retrieve: true,
processing: true,
serverSide: true,
ajax: {
url: ” route(‘admin.users.index’) }}”
type: ”
},
columns: [
{” ”
{” ”
{” ”
{” ”
{” ”
{
data: null,
sortable: false,
render: function (data) {
return `
${data.edit_url}”>
${data.destroy_url}” class=”delete-form” data-id=”
@csrf
@method(‘DELETE’)

`;
},
},
]Dom: “https://dev.to/cammanhhoang/<“”Datatable -idete justify-Content-Start” f<“ms-sm-auto”l><“ms-sm-3″B>><“datatable-scroll”t><“datatable-footer”ip>”Idioma: DatatableLanguage}); // Excluir manipulador de confirmação $ (documento) .on (” https://dev.to/cammanhhoang/click “” https://dev.to/cammanHhoang/.delete –button “Form) (event) {event.prevent. $ (this) .closest (“https://dev.to/cammanhhoang/form”; // Exemplo de uma confirmação simples de exclusão se (confirmar (“Você com certeza deseja excluir esse usuário?”) {Form.SubMIT ();}}); Yajra Laravel DataTables Self-Contained Templates: All JavaScript is included directly in the Blade template Easier Debugging: Having the code in one place makes it easier to understand and debug Performance Optimization: Server-side processing only fetches the data needed for each request Customizable: You have complete control over the implementation Error Handling To add error handling, you can modify the AJAX call to include error callbacks: // Inside the DataTable initialization ajax: {url: “{{rota (‘admin.users.index’)}}” type: “get” error: function (xhr, erro, jogado) {console.error (‘datatable error: “error); alert (‘ um erro ocorreu, o que ocorreu, o que ocorre com o modo de queda, o que ocorreu, o que é o que é o que ocorrer, o que é o que é o que é o que é o que é o que é o que é o que é o que você precisa fazer com relação ao registro e ao redor do que é o melhor e o mesmo e o que é o que você está com o objetivo de avaliar o desempenho dos dados em todos os que estão com o objetivo de avaliar a sensação de que é um dos dados. A implementação fornece controle completo sobre o seu pipeline de processamento de dados. necessidades de formatação de dados.

Fonte