jQuery Datatables a Nette

Ten formulář se odesílá ajaxem? Tak potom si pomocí nette.ajax vytvoř callback po úspěšným odeslání požadavku, který překreslí tu tabulku.
Něco ve stylu

$.nette.ext('prekreslit_tabulku', {
	init: function() {
		this.ext('snippets').after(function ($el) {
			table.ajax.reload();
		});
	}
});

@Croc prekreslit_tabulku je jen unikátní název extension pro nette ajax, snippets je název extension v nette.ajax, která se stará o překreslení snippetů.

No to jsem se pokoušel, ale vždy jsem dospěl jen k tomu, že se mi po postnutí formu vrátila (v poždavku – nikoliv překreslila) prázdná tabulka, nebo se vrátil jen JSON s novými daty, ale tabulka se nepřekreslila. Do db se hodnota zapsala, ale pak jsem nedokázal udělat to, aby se buď přidaná hodnota přidala do tabulky, nebo se celá tabulka reloudnula pomocí JS (s novým dotazem do DB).

Bohužel mě tlačí čas :( Takže to potřebuji nějak udělat, aby se po přidání nové hodnoty aktualizovala tabulka bez refreshe stránky…

EDIT:
Tak jsem zapřemýšlel a vyřešil jsem to takto:
šablona:

{block content}


	{control addForm}

		<div style="padding-top: 50px;">
			<table id="data">

				<thead>
					<th>ID</th>
					<th>Name</th>
				</thead>

				<tbody></tbody>

			</table>
		</div>

{/block}

{block script}
	<script type="text/javascript">
		$(document).ready(function() {
			var table = $('#data').DataTable( {
				"sAjaxSource": {link dataJson!},
				"aoColumns": [
					{"mData": "id_item"},
					{"mData": "name"}
				]
			});

			$("#button").click(function(e){
				e.preventDefault();
				var $el = $(this);

				$.nette.ajax({
					type: "POST",
					url: {link addRecord!},
					data: {'record': $('#addName').val()},
					success: function(payload) {
						table.row.add( {
							"id_item":	payload.newRow.id_item,
							"name": payload.newRow.name
						} ).draw();
					}
				});
			});

		});
	</script>

{/block}

Při odeslání formuláře zavolám pomocí ajax handle na přidání záznamů a ten pak pošlu zpět s doplněným ID přes payload a pouze ten přidám do zobrazené tabulky. Takže ani neproběhne zbytečné načtení celé tabulky znovu.

Editoval Croc (27. 7. 2016 19:29)

No já bych ho i použil, ale bohužel jsem neměl na výběr :) Takové bylo zadání

akadlec napsal(a):

@GEpic: nesouhlasím. A jak si myslíš že probíhá ajaxifikace těch „skvelých“ nettích gridů? DataTables je hodně elegantní a pokud plně využiješ jeho api tak se s ním pracuje snad i lépe než s klasickými gridy. Navíc DataTables je jako ext do nette, jen je stále ve fázi vývoje.

Jo, a použil si někdy jQuery Datatables na 2+ tisících záznamech? Pokud to použiješ na 50ti záznamech, tak to je ho*no a nepotřebuješ žádný grid, protože v tolika záznamech se zorientuje i kret*n. Ale pokud chceš použít tabulku na víc záznamů, už vidím jak posíláš do prohlížeče např. 2, 5, 10 tis. záznamů. Což je v praxi úplně normální.

Já na nich také začínal, takže vím o čem mluvím.

Editoval GEpic (29. 7. 2016 10:14)

@GEpic: hele představ si že jsem to zkusil a kupodivu to fungovalo. Ono taky chce trochu číst dokumentaci a tam se o tom dočteš…

Croc napsal(a):

@artemevsin Já už jsem to vyřešil, viz můj poslední příspěvek. Myslím že i docela elegantně a bez snippetu.

@GEpic Ono ani nemusíš posílat všechny záznamy najednou. Zatím jsem to nezkoušel, ale co jsem zahlídl tak datatables lze definovat tak, aby nenačítal všechny záznamy, ale jen potřebné na zobrazení dle flitrů a stránky.

Ve finále tedy napíšeš něco, co už existuje, navíc vždy musíš tabulku vykreslit ručně. Mě to prostě vzhledem k dostupným zdrojům přijde jako zbytečná práce navíc (a né ta užitečná práce navíc, která šlechtí, ale ta otročina). Protože budeš muset tabulku co tabulku definovat, poté sepsat JS nebo jQuery na inicializaci té tabulky, nadefinovat si filtry, atp. pokaždé zvlášť.