Vykreslování tabulky s velkým množstvím dat
- jedlicka
- Člen | 70
Zdravím,
měl bych dotaz na vykreslování tabulky (DataTable).
Mám jednoduchý příklad, kde se v metodě action
načtou
data z DB a pošlou do šablony a vykreslí se jednotlivé řádky tabulky.
Problém je v tom, že při načtení stránky se nejprve zobrazí tabulka s daty bez stránkování (čím větší množství dat, tím déle trvá vykreslení – u stovek až tisíců záznamů to trvá opravdu dlouho) a až teprve, když se vykreslí všechny data (řádky), tak se v tabulce zobrazí stránkování a tabulka se zmenší na požadovaných 10 záznamů na stránku.
Je to běžný jev nebo něco dělám špatně? Presenter i latte níže.
Děkuju moc za každou radu.
Martin
Presenter, metoda action:
public function actionServices()
{
$this->template->priceCategories = $this->database->table(Constants::DB_TABLE_PRICE_CATEGORY)
->where(array('uid' => $this->uid))->order("name ASC");
}
Latte:
<table id="table_price_category" class="table table-striped table-bordered table-hover" style="width:100%">
<thead>
<tr>
<th width="1%">#</th>
<th width="20%">Název</th>
<th width="20%">Popis</th>
<th width="1%">Operace</th>
</tr>
</thead>
<tbody>
{var $cis=1}
{foreach $priceCategories as $category}
<tr>
<td>{$cis++}</td>
<td>{$category->name}</td>
<td>{$category->description}</td>
<td class="text-center"></td>
</tr>
{/foreach}
</tbody>
</table>
<script>
$(document).ready(function () {
$('#table_price_category').DataTable({
pageLength: 10,
sDom: "<'dt-toolbar'<'col-xs-12 col-sm-6'l><'col-sm-6 col-xs-6 hidden-xs'f>r>" +
"t" +
"<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-sm-6 col-xs-12'p>>",
autoWidth: false,
responsive: true,
"language": {
"search": "Hledat: ",
"zeroRecords": "Žádné záznamy nebyly nalezeny",
"emptyTable": "Tabulka neobsahuje žádná data",
"lengthMenu": "Zobrazit _MENU_ záznamů ",
"info": "Zobrazeno _START_ až _END_ z celkem _TOTAL_ záznamů",
"infoEmpty": "Zobrazeno 0 až 0 z 0 záznamů",
"infoFiltered": "(filtrováno z celkem _MAX_ záznamů)",
"paginate": {
"first": "První",
"previous": "Předchozí",
"next": "Další",
"last": "Poslední"
}
}
});
});
</script>
- Kamil Valenta
- Člen | 815
Je to očekávatelné, protože do DOM generuješ všechny záznamy a pak je jen na úrovni JS skrýváš. Použij nějaký grid, který udělá LIMIT už v db a při stránkování bude překreslovat zase jen N záznamů na stránku.