Para que las datatables sean dinámicas siempre deben ser server-side+ajax (hasta donde sé) para que no haya necesidad de andar recargando la página, de lo contrario basta con que uses la paginación que trae por defecto laravel y te ahorras trabajo. Respecto al problema que tienes de velocidad depende de varios factores:
- Tu equipo,
- Tus datos,
- La forma como programas,
- La forma como haces tus consultas,
- La cantidad de archivos que debe leer php del framework y tu código,
- Otros...
Bueno, te anexo mi ejemplo. Solo copia y pega.
SQL:
-- ----------------------------
-- Table structure for periodos_pagos
-- ----------------------------
DROP TABLE IF EXISTS `periodos_pagos`;
CREATE TABLE `periodos_pagos` (
`id_periodo_pago` int(10) unsigned NOT NULL AUTO_INCREMENT,
`desc_periodo_pago` varchar(50) DEFAULT NULL,
`fecha_creacion_periodo_pago` datetime DEFAULT NULL,
`fecha_modificacion_periodo_pago` datetime DEFAULT NULL,
`fecha_eliminacion_periodo_pago` datetime DEFAULT NULL,
PRIMARY KEY (`id_periodo_pago`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of periodos_pagos
-- ----------------------------
INSERT INTO `periodos_pagos` VALUES ('1', '2000', '2018-06-30 00:59:47', '2018-06-30 03:36:30', null);
INSERT INTO `periodos_pagos` VALUES ('2', '2001', '2018-06-30 01:08:21', '2018-07-02 03:05:11', null);
INSERT INTO `periodos_pagos` VALUES ('3', '2003', '2018-09-21 14:59:18', '2018-09-21 15:00:02', null);
INSERT INTO `periodos_pagos` VALUES ('4', '2002', '2018-09-21 15:14:57', null, null);
INSERT INTO `periodos_pagos` VALUES ('5', '2004', '2018-09-23 20:28:01', '2018-09-23 20:28:20', null);
INSERT INTO `periodos_pagos` VALUES ('6', '2005', '2018-09-24 21:57:19', null, null);
MODELO:
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class PeriodoPago extends Model
{
protected $table = 'periodos_pagos';
protected $primaryKey = 'id_periodo_pago';
protected $fillable = ['desc_periodo_pago'];
protected $guarded = ['id_periodo_pago'];
protected $dates = [
'fecha_creacion_periodo_pago',
'fecha_modificacion_periodo_pago',
'fecha_eliminacion_periodo_pago'
];
public $timestamps = false;
}
CONTROLADOR:
<?php
namespace App\Http\Controllers;
use App\PeriodoPago;
use Illuminate\Http\Request;
use App\Http\Requests;
use Illuminate\Support\Facades\Validator;
use DB;
class PeriodosPagosController extends Controller
{
public function index()
{
return View('periodos-pagos.index');
}
public function obtenerPeriodosPagos(Request $request)
{
// datatable column index => database column name
$columns = array(
0 => 'id_periodo_pago',
1 => 'desc_periodo_pago',
2 => 'fecha_creacion_periodo_pago',
);
$obtener_periodos_pago = PeriodoPago::query();
$obtener_periodos_pago->select(
'periodos_pagos.id_periodo_pago',
'periodos_pagos.desc_periodo_pago',
'periodos_pagos.fecha_creacion_periodo_pago'
)
->whereNotNull(
'id_periodo_pago'
);
$total_periodos_pago = PeriodoPago::whereNotNull('id_periodo_pago')
->count('id_periodo_pago');
$totalData = $total_periodos_pago;
if(empty($request->input('search.value'))){
$totalFiltered = $totalData;
}else{
$search = $request->input('search.value');
$totalFiltered = PeriodoPago::where('id_periodo_pago','LIKE',"%{$search}%")
->orWhere('desc_periodo_pago', 'LIKE',"%{$search}%")
->whereNotNull('id_periodo_pago')
->count(DB::raw('id_periodo_pago'));
$obtener_periodos_pago->where('id_periodo_pago','LIKE',"%{$search}%")
->orWhere('desc_periodo_pago', 'LIKE',"%{$search}%");
}
if (empty($request->input('length'))) {
$limit = 10;
}else{
$limit = $request->input('length');
}
if (empty($request->input('start'))) {
$start = 0;
}else{
$start = $request->input('start');
}
if (empty($request->input('order.0.column'))) {
$order = 'id_periodo_pago';
}else{
$order = $columns[$request->input('order.0.column')];
}
if (empty($request->input('order.0.dir'))) {
$dir = 'asc';
}else{
$dir = $request->input('order.0.dir');
}
$obtener_periodos_pago->offset($start);
$obtener_periodos_pago->limit($limit);
$obtener_periodos_pago->orderBy($order, $dir);
$periodos_pago = $obtener_periodos_pago->get();
$data = array();
if(!empty($periodos_pago))
{
foreach ($periodos_pago as $periodo_pago)
{
$nestedData['id_periodo_pago'] = $periodo_pago->id_periodo_pago;
$nestedData['desc_periodo_pago'] = $periodo_pago->desc_periodo_pago;
$nestedData['fecha_creacion_periodo_pago'] = date('j M Y h:i a', strtotime($periodo_pago->fecha_creacion_periodo_pago));
$data[] = $nestedData;
}
}
$json_data = array(
"draw" => intval($request->input('draw')),
"recordsTotal" => intval($totalData),
"recordsFiltered" => intval($totalFiltered),
"data" => $data
);
return response()->json($json_data);
}
}
VISTA:
<div class="container">
<h2>Periodos de pago</h2>
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" data-toggle="tab" role="tab" aria-selected="true">Listado de periodos</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<div class="table-responsive">
<table class="table table-striped table-hover" cellspacing="0" width="100%" id="listado_periodos_pago">
<thead>
<th>No.</th>
<th>Periodo (año)</th>
<th>Fecha de registro</th>
</thead>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript">
//generar tabla al cargar pagina
var table = $('#listado_periodos_pago').DataTable({
'language': {
'sProcessing': 'Procesando...',
'sLengthMenu': 'Mostrar _MENU_ registros',
'sZeroRecords': 'No se encontraron resultados',
'sEmptyTable': 'Ningún dato disponible en esta tabla',
'sInfo': 'Mostrando registros del _START_ al _END_ de un total de _TOTAL_',
'sInfoEmpty': 'Mostrando registros del 0 al 0 de un total de 0 registros',
'sInfoFiltered': '(filtrado de un total de _MAX_ registros)',
'sInfoPostFix': '',
'sSearch': 'Buscar:',
'sUrl': '',
'sInfoThousands': ',',
'sLoadingRecords': 'Cargando...',
'oPaginate': {
'sFirst': 'Primero',
'sLast': 'Último',
'sNext': 'Siguiente',
'sPrevious': 'Anterior'
},
'oAria': {
'sSortAscending': ': Activar para ordenar la columna de manera ascendente',
'sSortDescending': ': Activar para ordenar la columna de manera descendente'
}
},
'processing': true,
'serverSide': true,
'ajax': {
'url': '{{ route("periodos-pagos.obtenerPeriodosPagos") }}',
'dataType': 'json',
'type': 'get'
},
'columns': [
{'data': 'id_periodo_pago'},
{'data': 'desc_periodo_pago'},
{'data': 'fecha_creacion_periodo_pago'}
],
'rowId': 'id_periodo_pago',
'columnDefs': [
{
'targets': 0,
'className': 'text-center'
}
]
});
RUTAS:
Route::get('periodos-de-pagos', [
'as' => 'periodos-pagos.index',
'uses' => 'PeriodosPagosController@index'
]);
Route::get('periodos-de-pagos/obtener-periodos-pagos', [
'as' => 'periodos-pagos.obtenerPeriodosPagos',
'uses' => 'PeriodosPagosController@obtenerPeriodosPagos'
]);
Posiblemente debas importar los estilos de datatables (css y js) en tu vista e ignorar los que trae el paquete que instalaste.