Laravel-datatables: Pemuatan lambat saat data lebih dari 1000
Ringkasan masalah atau permintaan fitur
Saya menggunakan plugin ini untuk waktu yang sangat lama. tetapi setelah beberapa hari itu memperlambat saya (sangat lambat). Saya mencoba menanyakan> 1K data. Itu terus memuat setidaknya selama 5 detik atau lebih untuk menampilkan data. Itu terjadi ketika mengubah pagination juga.
Potongan kode masalah
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);
}
Detail sistem
Digital Ocean $ 10.
- Sistem Operasi Ubuntu 16.04
- Versi PHP 7.1.1
- Versi Laravel 5.3.1
- Versi Laravel-Datatables Terbaru
stefensuhat
Semua 13 komentar
Saya menghadapi masalah yang sama, dengan lebih dari 1 catatan lac dalam database. Tapi pertanyaan dan skenario saya agak rumit. Di tabel saya, saya menampilkan data dari lebih dari 3 tabel. Dan saya mengedit nilai kolom sebelum merender data ke dalam tabel.
Ini adalah kode untuk pandangan saya
/**
*
*
* 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'));
}
Dalam pandangan saya, saya menggunakan file blade khusus untuk memuat JavaScript Datatble
{!!$table->render('vendor.Chumper.template')!!}
{!! $table->script('vendor.Chumper.ticket-javascript') !!}
Dalam file pisau JavaScript saya, saya memanggil rute untuk pemrosesan sisi server, yang menghasilkan pembuat kueri untuk tabel saya dengan gabungan dan kemudian memanggil fungsi yang membuat tabel.
tiket-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>
Berfungsi untuk membangun 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
}
Akhirnya fungsi yang membuat data dalam tabel
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();
}
Ini bekerja cepat untuk 500 rekaman pertama tetapi menjadi lambat setelah data meningkat.
Saya menggunakan php7, WAMP, mysql 5.7.14
@ssuhat Maaf telah menambahkan komentar panjang ini, tapi masalah Anda sepertinya sama dengan saya dan saya tidak ingin mengangkat masalah duplikat untuk itu.
mverma16
pada 20 Jan 2017
Tidak terlalu yakin akan hal ini tetapi saya juga menggunakan Digital Ocean di aplikasi demo saya dan menurut saya responsnya agak cepat. Pasti ada hal lain yang terjadi di server Anda? Mungkin mencoba memeriksa log dan sumber daya server Anda?
yajra
pada 20 Jan 2017
@yajra Saya menggunakan Laravel Forge untuk menangani server saya. Jadi menurut saya ini bukan masalah server.
stefensuhat
pada 20 Jan 2017
@yajra Apakah Anda punya saran untuk saya?
mverma16
pada 20 Jan 2017
Hai, saya punya masalah yang sama.
im melakukan pemilihan 8 bidang dengan 3 bergabung dalam tabel berisi 25.000 catatan dan ini lambat. (8 detik per 25 catatan per halaman)
beberapa tips untuk mempercepat hal tersebut? Terima kasih
mariani10
pada 27 Jan 2017
Mungkin Anda bisa mengaktifkan log kueri yang lambat dan melihat apakah ada rekomendasi?
AdrienPoupa
pada 3 Feb 2017
@ssuhat dan @ mariani10 , itu hanya saran (abaikan jika Anda sudah melakukannya). Periksa waktu eksekusi kueri Anda dan coba optimalkan. Dalam kasus saya, kueri yang saya tulis lambat sehingga membuat pemuatan data yang dapat diakses menjadi lambat. Setelah mengoptimalkan kueri, sekarang bekerja lebih cepat.
mverma16
pada 3 Feb 2017
Menambahkan indeks bisa menjadi kunci untuk performa yang lebih baik
AdrienPoupa
pada 3 Feb 2017
Menggantikan:
$brands = Brand::select('id', 'name');
=> $brands = Brand::query();
trongloikt192
pada 6 Jul 2017
Ya, mengindeks dan mengoptimalkan kueri adalah solusi untuk kinerja yang lambat. Dan tentu saja hindari menggunakan collection. Terima kasih!
yajra
pada 6 Jul 2017
Hanya untuk menambah diskusi ini, setelah Anda memastikan bahwa Anda meneruskan kueri ke Datatables (dan bukan Collection - lihat komentar di atas) - ya, Anda dapat menambahkan indeks, tetapi Anda sebenarnya ingin membuat indeks komposit dari kolom Anda ' memilih kembali. misalnya Anda ingin indeks komposit pada kolom foo, bar, create_at jika kueri Anda terlihat seperti ini SELECT foo, bar, MAX(created) WHERE ... GROUP BY foo, bar' . Ketika saya melakukan ini, saya menemukan kecepatan kueri saya berkurang 50%.
alexkb
pada 20 Jun 2018
Tidak ada cara untuk berpuasa. Saya menggunakan laravel pagination 1000 records sendiri dan setelah menerapkan datatable dan menghapus jquery datatable bottom pagination. Tidak masalah bagiku
BRVK
pada 22 Jul 2018
Menggantikan:
$brands = Brand::select('id', 'name');
=>$brands = Brand::query();
Ini solusi terbaik.
alkhachatryan
pada 1 Nov 2018
Masalah terkait
sangnguyenplus
·
3Komentar
alejandri
·
3Komentar
jgatringer
·
3Komentar
hohuuhau
·
3Komentar
ghost
·
3Komentar
Komentar yang paling membantu
Ya, mengindeks dan mengoptimalkan kueri adalah solusi untuk kinerja yang lambat. Dan tentu saja hindari menggunakan collection. Terima kasih!