Vykreslování tabulky s velkým množstvím dat

jedlicka
Člen | 49
+
0
-

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ů&nbsp;",
                    "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 | 546
+
+4
-

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.