Laravel-datatables: Carregamento lento quando os dados são mais de 1000
Resumo do problema ou solicitação de recurso
Eu usei este plugin por muito tempo. mas depois de alguns dias isso me atrasou (muito lento). Tento consultar dados> 1K. Ele continua carregando por pelo menos 5 segundos ou mais para mostrar os dados. Acontece quando muda a paginação também.
Fragmento de código do problema
public function getData()
{
$brands = Brand::select('id', 'name');
return Datatables::of($brands)
->addColumn('action', function ($brand) {
return '
<a href="/brands/' . $brand->id . '/edit" class="btn btn-xs btn-primary">
<i class="fa fa-pencil"></i> Edit
</a>
<a href="#" id="delete-button" data-id="' . $brand->id . '" class="btn btn-xs btn-danger">
<i class="fa fa-times"></i> Delete
</a>
';
})
->make(true);
}
Detalhes do sistema
Oceano Digital $ 10.
- Sistema operacional Ubuntu 16.04
- PHP versão 7.1
- Laravel Versão 5.3
- Versão mais recente do Laravel-Datatables
stefensuhat
Todos 13 comentários
Estou enfrentando o mesmo problema, com mais de 1 registros lac no banco de dados. Mas minha consulta e cenário são um pouco complexos. Na minha tabela, estou mostrando dados de mais de 3 tabelas. E eu estou editando os valores da coluna antes de renderizar os dados na tabela.
Este é o código para minha visão
/**
*
*
* function to return table view
*/
public function inbox_ticket_list() {
$table = \Datatable::table()
->addColumn(
"", Lang::get('lang.subject'), Lang::get('lang.ticket_id'), Lang::get('lang.priority'), Lang::get('lang.from'), Lang::get('lang.assigned_to'), Lang::get('lang.last_activity'), Lang::get('lang.created-at'))
->noScript();
return view('themes.default1.agent.helpdesk.ticket.inbox', compact('table'));
}
Na minha opinião, estou usando um arquivo blade personalizado para carregar o Datatble JavaScript
{!!$table->render('vendor.Chumper.template')!!}
{!! $table->script('vendor.Chumper.ticket-javascript') !!}
Em meu arquivo blade JavaScript, estou chamando uma rota para o processamento do lado do servidor, que gera o construtor de consultas para minha tabela com junções e, em seguida, chama uma função que renderiza a tabela.
ticket-javascript.blade
<?php
$segments = \Request::segments();
$segment = "";
foreach($segments as $seg){
$segment.="/".$seg;
}
?>
<script type="text/javascript">
function myFunction()
{
return jQuery('#chumper').dataTable({
"sDom": "<'row'<'col-xs-6'l><'col-xs-6'f>r>"+
"t"+
"<'row'<'col-xs-6'i><'col-xs-6'p>>",
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"lengthMenu": [[10, 25, 50, 100, 500], [10, 25, 50, 100, 500]],
"ajax": {
url: "{{url('filter')}}",
data: function (d) {
d.labels = $('select[name=label]').val();
d.tags = $('select[name=tag]').val();
d.segment = "{{$segment}}";
}
},
"aaSorting": sort,
"columnDefs": [
{ "searchable": false, "targets": [6,7] },
{ "visible": last, "targets": 6 },
{"visible": create, "targets":7},
],
"fnCreatedRow": function (nRow, aData, iDataIndex) {
var str = aData[3];
if (str.search("#000") == -1) {
$("td", nRow).css({"background-color": "#F3F3F3", "font-weight": "600", "border-bottom": "solid 0.5px #ddd", "border-right": "solid 0.5px #F3F3F3"});
$("td", nRow).mouseenter(function () {
$("td", nRow).css({"background-color": "#DEDFE0", "font-weight": "600", "border-bottom": "solid 0.5px #ddd", "border-right": "solid 0.5px #DEDFE0"});
});
$("td", nRow).mouseleave(function () {
$("td", nRow).css({"background-color": "#F3F3F3", "font-weight": "600", "border-bottom": "solid 0.5px #ddd", "border-right": "solid 0.5px #F3F3F3"});
});
} else {
$("td", nRow).css({"background-color": "white", "border-bottom": "solid 0.5px #ddd", "border-right": "solid 0.5px white"});
$("td", nRow).mouseenter(function () {
$("td", nRow).css({"background-color": "#DEDFE0", "border-bottom": "solid 0.5px #ddd", "border-right": "solid 0.5px #DEDFE0"});
});
$("td", nRow).mouseleave(function () {
$("td", nRow).css({"background-color": "white", "border-bottom": "solid 0.5px #ddd", "border-right": "solid 0.5px white"});
});
}
}
});
}
</script>
Função para construir querybuilder
public function table(){
// if (Auth::user()->role == 'admin') {
$ticket = new Tickets();
$tickets = $ticket
->leftJoin('ticket_thread', function ($join) {
$join->on('tickets.id', '=', 'ticket_thread.ticket_id')
->whereNotNull('title')
->where('ticket_thread.is_internal', '<>', 1);
})
->leftJoin('ticket_thread as ticket_thread2', 'ticket_thread2.ticket_id', '=', 'tickets.id')
->Join('ticket_source', 'ticket_source.id', '=', 'tickets.source')
->leftJoin('ticket_priority', 'ticket_priority.priority_id', '=', 'tickets.priority_id')
->leftJoin('users as u', 'u.id', '=', 'tickets.user_id')
->leftJoin('users as u1', 'u1.id', '=', 'tickets.assigned_to')
->leftJoin('ticket_attachment', 'ticket_attachment.thread_id', '=', 'ticket_thread.id')
->leftJoin('teams', 'teams.id', '=', 'tickets.team_id')
->leftJoin('ticket_collaborator', 'ticket_collaborator.ticket_id', '=', 'tickets.id')
->select(
'tickets.id',
// 'tickets.team_id',
'ticket_thread.title',
'tickets.ticket_number',
'ticket_priority.priority',
'u.user_name as user_name',
'u1.user_name as assign_user_name',
\DB::raw('max(ticket_thread.updated_at) as updated_at'),
\DB::raw('min(ticket_thread.updated_at) as created_at'),
'u.first_name as first_name',
'u.last_name as last_name',
'u1.first_name as assign_first_name',
'u1.last_name as assign_last_name',
'ticket_priority.priority_color',
'teams.name',
DB::raw('COUNT(DISTINCT ticket_thread2.id) as countthread'),
DB::raw('COUNT(ticket_attachment.thread_id) as countattachment'),
DB::raw('COUNT(ticket_collaborator.ticket_id) as countcollaborator'),
'tickets.status',
'tickets.user_id',
'tickets.priority_id', 'tickets.assigned_to',
'ticket_status.name as tickets_status',
'ticket_source.css_class as css',
DB::raw('substring_index(group_concat(ticket_thread.poster order by ticket_thread.id desc) , ",", 1) as last_replier'),
DB::raw('substring_index(group_concat(ticket_thread.title order by ticket_thread.id asc) , ",", 1) as ticket_title'),
'u.active as verified')
->groupby('tickets.id');
return \Ttable::getTable($table); // call to function which renders table
}
Finalmente, a função que renderiza dados na tabela
public static function getTable($tickets) {
return \Datatables::of($tickets)
->addColumn('id', function ($tickets) {
return "<input type='checkbox' name='select_all[]' id='" . $tickets->id . "' onclick='someFunction(this.id)' class='selectval icheckbox_flat-blue' value='" . $tickets->id . "'></input>";
})
->addColumn('title', function ($tickets) {
if (isset($tickets->ticket_title)) {
$string = mb_substr($tickets->ticket_title, 0, 20, 'UTF-8');
} else {
$string = Lang::get('lang.no-subject');
}
$collab = $tickets->countcollaborator;
if ($collab > 0) {
$collabString = ' <i class="fa fa-users"></i>';
} else {
$collabString = null;
}
$attachCount = $tickets->countattachment;
if ($attachCount > 0) {
$attachString = ' <i class="fa fa-paperclip"></i>';
} else {
$attachString = '';
}
$css = $tickets->css;
$titles = '';
if ($tickets->ticket_title) {
$titles = $tickets->ticket_title;
}
$tooltip_script = self::tooltip($tickets->id);
return "<div class='tooltip1' id='tool" . $tickets->id . "'>
<a href='" . route('ticket.thread', [$tickets->id]) . "'>" . ucfirst($string) . " <span style='color:green'>(" . $tickets->countthread . ") <i class='" . $css . "'></i></span>
</a>" . $collabString . $attachString . $tooltip_script .
"<span class='tooltiptext' id='tooltip" . $tickets->id . "'>Loading...</span></div>";
})
->addColumn('ticket_number', function ($tickets) {
return "<a href='" . route('ticket.thread', [$tickets->id]) . "' title='" . $tickets->ticket_number . "'>#" . $tickets->ticket_number . '</a>';
})
->addColumn('priority', function ($tickets) {
$rep = ($tickets->last_replier == 'client') ? '#F39C12' : '#000';
$priority = $tickets->priority;
if ($priority != null) {
$prio = '<button class="btn btn-xs ' . $rep . '" style="background-color: ' . $tickets->priority_color . '; color:#F7FBCB">' . ucfirst($tickets->priority) . '</button>';
} else {
$prio = $tickets->last_relier_role;
}
return $prio;
})
->addColumn('user_name', function ($tickets) {
$from = $tickets->first_name;
$url = route('user.show', $tickets->user_id);
$name = $tickets->user_name;
if ($from) {
$name = utfEncoding($tickets->first_name) . ' ' . utfEncoding($tickets->last_name);
}
$color = '';
if ($tickets->verified == 0 || $tickets->verified == '0') {
$color = "<i class='fa fa-exclamation-triangle' title='" . Lang::get('lang.accoutn-not-verified') . "'></i>";
}
return "<a href='" . $url . "' title='" . Lang::get('lang.see-profile1') . ' ' . ucfirst($name) . ''' . Lang::get('lang.see-profile2') . "'><span style='color:#508983'>" . ucfirst(str_limit($name, 30)) . ' <span style="color:#f75959">' . $color . '</span></span></a>';
})
->addColumn('assign_user_name', function ($tickets) {
if ($tickets->assigned_to == null && $tickets->name == null) {
return "<span style='color:red'>Unassigned</span>";
} else {
$assign = $tickets->assign_user_name;
if ($tickets->assigned_to != null) {
$assign = utfEncoding($tickets->assign_first_name) . ' ' . utfEncoding($tickets->assign_last_name);
$url = route('user.show', $tickets->assigned_to);
return "<a href='" . $url . "' title='" . Lang::get('lang.see-profile1') . ' ' . ucfirst($assign) . ''' . Lang::get('lang.see-profile2') . "'><span style='color:green'>" . mb_substr(ucfirst($assign), 0, 30, 'UTF-8') . '</span></a>';
} else{
$url1 = "#";
return "<a href='" . $url1 . "' title='" . Lang::get('lang.see-profile1') . ' ' . ucfirst($tickets->name) . ''' . Lang::get('lang.see-profile2') . "'><span style='color:green'>" . mb_substr(ucfirst($tickets->name), 0, 30, 'UTF-8') . '</span></a>';
}
}
})
->addColumn('updated_at', function ($tickets) {
$TicketDatarow = $tickets->updated_at;
$updated = '--';
if ($TicketDatarow) {
$updated = $tickets->updated_at;
}
return '<span style="display:none">' . $updated . '</span>' . UTC::usertimezone($updated);
})
->addColumn('created_at', function ($tickets) {
$TicketDatarow = $tickets->created_at;
$updated = '--';
if ($TicketDatarow) {
$updated = $tickets->created_at;
}
return '<span style="display:none">' . $updated . '</span>' . UTC::usertimezone($updated);
})
->make();
}
Isso funciona rápido para os primeiros 500 registros, mas fica lento depois que os dados aumentam.
Estou usando php7, WAMP, mysql 5.7.14
@ssuhat Desculpe por adicionar este longo comentário, mas seu problema parece o mesmo que o meu e não quero levantar um problema duplicado para ele.
mverma16
em 20 jan. 2017
Não tenho certeza disso, mas estou usando o Digital Ocean também no meu aplicativo de demonstração e a resposta é um pouco rápida, eu acho. Deve haver algo mais acontecendo em seu servidor? Talvez tente verificar seus logs e recursos do servidor?
yajra
em 20 jan. 2017
@yajra Estou usando o Laravel Forge para lidar com meu servidor. Então eu acho que não é problema do servidor.
stefensuhat
em 20 jan. 2017
@yajra Você tem alguma sugestão para mim?
mverma16
em 20 jan. 2017
Oi eu tenho o mesmo problema.
Estou fazendo um select de 8 campos com 3 join em uma tabela de 25.000 registros e isso é lento. (8 segundos por 25 registros por página)
algumas dicas para acelerar o negócio? obrigado
mariani10
em 27 jan. 2017
Talvez você possa habilitar o log de consultas lentas e ver se há alguma recomendação?
AdrienPoupa
em 3 fev. 2017
@ssuhat e @ mariani10 , é apenas uma sugestão (ignore se você já fez). Verifique o tempo de execução de suas consultas e tente otimizá-las. No meu caso, a consulta que escrevi era lenta, por isso tornou o carregamento da tabela de dados lento. Depois de otimizar a consulta, ela está funcionando mais rápido agora.
mverma16
em 3 fev. 2017
Adicionar índices pode ser a chave para melhores desempenhos
AdrienPoupa
em 3 fev. 2017
Substituir:
$brands = Brand::select('id', 'name');
=> $brands = Brand::query();
trongloikt192
em 6 jul. 2017
Sim, indexar e otimizar a consulta é a solução para desempenho lento. E, claro, evite usar a coleção. Obrigado!
yajra
em 6 jul. 2017
Apenas para adicionar a esta discussão, depois de ter certeza de passar a consulta para Datatables (e não para a Coleção - veja os comentários acima) - sim, você pode adicionar índices, mas na verdade deseja criar índices compostos das colunas que você ' re selecionando. por exemplo, você quer um índice composto nas colunas foo, bar, created_at se sua consulta for semelhante a SELECT foo, bar, MAX(created) WHERE ... GROUP BY foo, bar' . Quando fiz isso, descobri que a velocidade de minha consulta foi reduzida em 50%.
alexkb
em 20 jun. 2018
Não há como ficar rápido. Estou usando o próprio laravel pagination 1000 records e depois de aplicar datatable e removido jquery datatable bottom pagination. Tudo bem para mim
BRVK
em 22 jul. 2018
Substituir:
$brands = Brand::select('id', 'name');
=>$brands = Brand::query();
essa é a melhor solução.
alkhachatryan
em 1 nov. 2018
Questões relacionadas
alejandri
·
3Comentários
ghost
·
3Comentários
jackrsantana
·
3Comentários
vipin733
·
3Comentários
josiahke
·
3Comentários
Comentários muito úteis
Sim, indexar e otimizar a consulta é a solução para desempenho lento. E, claro, evite usar a coleção. Obrigado!