DataTables – serverside loading

Upozornění: Tohle vlákno je hodně staré a informace nemusí být platné pro současné Nette.
Kakaku
Člen | 27
+
0
-

Zdravím,
mám stránku, kde vypisuji údaje o zákaznících. K výpisu používám tabulkový plugin DataTables.

{block content}

	<div class="col-md-12 col-sm-12 col-xs-12">
		<div class="x_panel">
			<div class="x_title">
				<h2>Listy zákazníků</h2>
				<ul class="nav navbar-right panel_toolbox">
					{if $user->isAllowed("Customers", 'createCustomer')}
					<li><a n:href="Customers:createCustomer"><i class="fa fa-plus"> </i> Vytvořit nový list</a></li>
					{/if}
				</ul>
				<div class="clearfix"></div>
			</div>
			<div class="x_content">
				<table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
					<thead>
					<tr>
						<th>Firma</th>
						<th>IČO</th>
						<th>SAP číslo</th>
						<th>Autorizace OŘ</th>
						<th>Autorizace ID</th>
						<th>PSČ</th>
						<th>Kategorie</th>
						<th>Edit</th>
						<th>Detail</th>
					</tr>
					</thead>
					<tfoot>
					<tr>
						<th class="datatable-search">Firma</th>
						<th class="datatable-search">IČO</th>
						<th class="datatable-search">SAP číslo</th>
						<th class="datatable-search">Ano/Ne</th>
						<th class="datatable-search">Ano/Ne</th>
						<th class="datatable-search">PSČ</th>
						<th class="datatable-search">Kategorie</th>
						<th></th>
						<th></th>
					</tr>
					</tfoot>
					<tbody>
					{if count($customers) > 0}
					{foreach $customers as $c}
						<tr>
							<td>{$c->company_name}</td>
							<td>{$c->ico}</td>
							<td>{$c->SAP_number}</td>
							{if $c->authorized_OR == 1}
								<td><span class="hidden">ANO</span><img class="icon-status" alt="ANO" src="{$basePath}/img/icon_check.png"</td>
							{else}
								<td><span class="hidden">NE</span><img class="icon-status" alt="NE" src="{$basePath}/img/icon_cross.png"</td>
							{/if}

							{if $c->authorized_ID == 1}
								<td><span class="hidden">ANO</span><img class="icon-status" alt="ANO" src="{$basePath}/img/icon_check.png"</td>
							{else}
								<td><span class="hidden">NE</span><img class="icon-status" alt="NE" src="{$basePath}/img/icon_cross.png"</td>
							{/if}
							<td>{$c->company_zip}</td>
							<td>{$c->customer_category}</td>
							{if $editAll == true}
								{var $canEdit = true}
							{else}
								{if $c->OZ_id == $user->id}
									{var $canEdit = true}
								{else}
									{var $canEdit = false}
								{/if}
							{/if}

							{if $canEdit == true}
								<td><a n:href="Customers:editCustomer $c->id">EDITOVAT</a></td>
							{else}
								<td>Nelze editovat</td>
							{/if}
							<td><a n:href="Customers:detail $c->id">DETAIL</a></td>
						</tr>
					{/foreach}
					{/if}
					</tbody>
				</table>

			</div>
		</div>
	</div>


{/block}
{block scripts}
	{include parent}
	<script src="{$basePath}/js/datatables/jquery.dataTables.min.js"></script>
	<script src="{$basePath}/js/datatables/dataTables.bootstrap.js"></script>
	<script src="{$basePath}/js/datatables/dataTables.responsive.min.js"></script>
	<script src="{$basePath}/js/datatables/responsive.bootstrap.min.js"></script>

	<script type="text/javascript">
		var table = $('#datatable-responsive').DataTable({
			responsive: true,
			columnDefs: [
				{ responsivePriority: 1, targets: 0 },
				{ responsivePriority: 2, targets: -1 }
			]
		});

		// Setup - add a text input to each footer cell
		$('#datatable-responsive tfoot th.datatable-search').each( function () {
			var title = $(this).text();
			$(this).html( '<input type="text" placeholder="'+title+'" />' );
		} );

		// DataTable

		// Apply the search
		table.columns().every( function () {
			var that = this;

			$( 'input', this.footer() ).on( 'keyup change', function () {
				if ( that.search() !== this.value ) {
					that
							.search( this.value )
							.draw();
				}
			} );
		} );
	</script>

{/block}

{block head}
{/block}

Těch záznamů je hrozně moc, trvá dost dlouho než se to načte a tak jsem se rozhodl, že chci udělat server side, přes ajax, který bude načítat záznamy tzv. lazy-loadingem

Mimo Nette jsem si vytvořil projekt, abych pochopil základní funkčnost toho serverside (za pomocí třídy SSP_CLASS.php, ale je zde spousta problémů, které nedokážu vyřešit.

Nevím, jak to šikovně implemetovat do Nette, aby se odstranili následující problémy:

  • Mám přihlášeného uživatele, který vidí pouze nějaké zákazníky. Potřebuji nějakou klauzuli WHERE v závislosti na skupině oprávnění uživatele (musí to tedy být napojeno přímo na Nette)
  • Někteří uživatelé mají právo editovat zákazníky a jiní zase ne.
  • Ve výpisu potřebuji mít přístup do Nette /www/images, protože v závislosti na sloupečku (hodnota 1/0 se nahradí obrázek).
  • generování odkazu na editaci (mění se ID, event. jde řešit přes formatter)

Prosím o radu, jak to vyřešit. Našel jsem několik návodů, ale žádný neuměl postupné načítání záznamů.
Děkuji

CZechBoY
Člen | 3608
+
0
-

Z toho tvyho rucniho skriptu udelej potomka Nette\Application\UI\Presenter a vse nahaz do metody actionDefault.
Pokud predavas nejake parametry tak je pridej jako parametry metody actionDefault.
Databazi si vyzadas tak, ze do konstruktoru das parametr Nette\Database\Context $db a ulozis si ten objekt nekam do property.

Ve zkratce nejak takto

<?php
use Nette;

class CustomersPresenter extends Nette\Application\UI\Presenter
{
    private $db;

    public function __construct(Nette\Database\Connection $db)
    {
        $this->db = $db;
    }

    public function actionDefault($offset, $limit)
    {
        $selection = $this->db->table("customer")
            ->select("id, name, group")
            ->limit($limit, $offset);
/* odkomentuj po implementaci autentizace a autorizace
        if (!$this->user->isAllowed("Customer", "nejaci zakaznici")) {
            $selection->where("group", "nejaka skupina");
        }
*/
        $data = $selection->fetchAssoc("[]->");

        $this->sendJson($data);
    }
}