Ajaxizace Nette – dynamické snippety – prosím o pomoc

Ahoj,

Mám problém s ajaxizací mojí tabulky. Problém je ten, že k tabulce mám vytvořené nějaké filtry a vyhledávání.
Nejdříve jsem zkoušel plugin datatables
https://datatables.net/
Ale kdykoliv jsem kliknul na tlačítko v tabulce, zrušili se veškerá data v naklikaná v pluginu, protože pracuje pouze s HTML. Pak jsem zkoušel jejich AJAX řešení, nějakým způsobem posílat data přes JSON do handlu když se přepíše snippet, ale nedal jsem to dohromady, složitý paskvil.

Přešel jsem tedy na plugin list.js
https://listjs.com/
Sort jsem si napsal sám přes handly.
Nyní zkouším, jak zapojit ajax tlačítka do celého řešení.

Pokusím se sepsat kód tak, jak je, jakožto vzor, abych sem nevypisoval úplně vše, bylo by to hodně složité.

tabulka.latte

<div class="live-search-wrapper">
	<div class="input-group-sm mb-3>
		<input class="form-control search ajax" id="search-field" placeholder="Hledat">
	</div>
</div>

{snippet tableTable}
<div class="pre-scrollable" id="table">
	<table class="table" id="dataTable">
		<thead class="thead-light">
			<tr>
				<th><a {if $orderByAttr =='p.id' && $orderByDirection == 'DESC'} href="{link changeOrderBy!, 'p.id', ASC'}"
						{else}
						   href="{link changeOrderBy!, 'p.id', 'DESC'}"{/if} class="ajax">
 						{if $orderByAttr != 'p.id'}
                                    <span class="fa fa-sort"> ID:</span>
                        {else}
                                    <span n:class="fas, $orderByAttr == 'p.id' && $orderByDirection == 'ASC' ? fa-sort-up : fa-sort-down">ID:</span>
                        {/if}
                     </a>
                </th>
<!--Dejme tomu, že takových sloupců zde máme více-->
				<th>Ajax tlač.:</th>
				<th>Ajax tlač1.:</th>
			</tr>
		</thead>
		<tbody class="list">
			{foreach $items as $item}
			<tr n:class="$item["conditionOne"] == 1 ? bg-success">
				<td class="align-middle id">{$item['id']}</td>
				<td class="align-middle">
					{snippet $item->id}
						{if $item['conditionTwo'] == null && $userRole == "user"}
							 <a class="btn btn-primary btn-sm ajax" n:href="do! '1', $item->id">Do</a>
						{else}
                             <a class="btn btn-success btn-sm disabled">Done</a>
                        {/if}
					{/snippet}
				</td>
				<td class="align-middle">
					{snippet $item->id}
						{if $item['conditionThree'] == null && $userRole == "user"}
							 <a class="btn btn-primary btn-sm ajax" n:href="doOne! '1', $item->id">DoOne</a>
						{else}
                             <a class="btn btn-success btn-sm disabled">DoneOneDone</a>
                        {/if}
					{/snippet}
				</td>
			</tr>
			{/foreach}
		</tbody>
	</table>
</div>
{/snippet}

Tolik k latte, ted se pokusím srozumitelně sepsat homepage presenter, který to obsluhuje.

public function handleDo($do, $id)
 {
     $this->itemModel->updateItemDo($do, $id, $this->user->getId());
  if ($this->isAjax()) {
      $this->redrawControl('tableTable');
  } else {
      $this->redirect('this');
  }
 }
 public function handleDoOne($doOne, $id)
 {
         $this->itemModel->updateItemDoOne($doOne, $id, $this->user->getId());
         if ($this->isAjax()) {
         $this->redrawControl('tableTable');
     } else {
             $this->redirect('this');
         }
 }

Asi to rozdělím do více dotazů…
Nyní tedy ta první část,

Pokud si přes vyhledávání v tabulce najdu určitý row třeba dle ID, nebo i když jen kliknu na tlačítko „Do“,
Změní se mi některá tlačítka Do a DoOne na DoDone a DoOneDone, nevím v jaké logice, ale změní se všechny, takže mám bud DoOne nebo DoDone všude.

V handlu se mi provede pouze tlačítko s poslaným $id, to je v pořádku a v DB mám také upraven jen daný řádek.

Zkoušel jsem toho už mnoho, upřímně ani nevím, co dělám špatně, nebo kde se chytit…popostrčil by mě někdo prosím? Už se s tím peru týden. Případně, pokud mi doporučíte úplně jiné řešení, jak mít Sort, vyhledávání a AJAX tlačítka v jedné tabulce, nejsem proti tomu i celé to přepsat…

Mám problém, že s JS moc neumím, o to je to pro mě složitější.

Děkuji za rady.

Editoval ragulin (30. 6. 2019 15:16)