j-ServerListing

jComponent 20 · jcomponent@20 component Příklad načten s jComponent 20

Konfigurace:

paginate {String} odkaz na funkci function(page) pro stránku
pages {Number} max. stránky v stránce (předvolené: 3 -> polovina + aktuální stránka + polovina)
scrolltop {Boolean} se automaticky otáčí, když uživatel změní stránku
parent {String} jQuery selektor pro získání výšky, umožňuje pevnou plochu s přizpůsobenými scrollbars
margin {Number} je marže pro parent (předvolený: 0)
marginxs {Number} volitelné, horní / dolní hranice spolu pro šířku obrazovky xs
marginsm vrchní / dolní hranice pro šířku obrazovky sm
marginmd vrchní / dolní hranice pro šířku obrazovky md
marginlg vrchní / dolní hranice pro šířku obrazovky lg
pluralizeitems pluralizace pro počítání všech položek, formulář: # zero,# one,# two-four,# five and more (pokud je prázdný, bude se skrytý)
pluralizepages pluralizace pro počítání všech položek, formulář: # zero,# one,# two-four,# five and more (pokud je prázdný, bude se skrytý)
modulo {Number} může doplnit prázdné položky s předmětem { EMPTY: 1 } (předvolené: 0)
nopages {Boolean} může skrývat stránku, pokud jsou stránky menší než 2 (předvolené: false)

Modelka:

Model musí být ve formátu níže:

{
	page: Number,
	count: Number,
	pages: Number,
	items: [{...}, {...}]
}

Tangular rozložení:

body {String} obsahuje všechny renderované položky, výstup je HTML
page {Číslo} aktuální číslo stránky
pages {číslo} počet stránek
count {Číslo} počítání položek

Tangular položky:

model obsahuje objekt z Array
Druhý model $ obsahuje informace o zdroji údajů { index: Number, page: Number, pages: Number, count: Number, value: YOUR_DATA }

Použijte ji s <ui-component name="serverlisting">Pokud je součástka ještě nezačleněna, jComponent Stáhnout ji na první použití z adresy DEF.fallback a) The Componentator CDN dle předvolby. autor: Peter Širka. zdroj: Componentator Výrobce je autorizován, MIT licence.

example.html

<div class="row">
	<div class="col-sm-6">
		<h2>With layout</h2>
		<ui-component name="serverlisting" path="model" config="paginate:gotopage">
			<script type="text/html">
				<div class="col-xs-4">
					<div>Item: {{ name }}</div>
				</div>
			</script>
			<script type="text/html">
				<div><b>Layout:</b></div>
				<br />
				<div class="row">{{ body | raw }}</div>
			</script>
		</ui-component>
		<br />
	</div>

	<div class="col-sm-6">
		<h2>Without layout</h2>
		<ui-component name="serverlisting" path="model" config="paginate:gotopage">
			<script type="text/html">
				<div>
					<div>Item: {{ name }}</div>
				</div>
			</script>
		</ui-component>
		<br />
	</div>
</div>

<script>

	var model = {};
	model.page = 1;
	model.pages = 3;
	model.count = 10;
	model.items = [];

	for (var i = 0; i < 10; i++)
		model.items.push({ name: GUID(10) });

	function gotopage(page) {
		alert('GO TO PAGE:' + page);
	}

</script>