j-ServerListing

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

Configuration :

Lien paginate {String} à une fonction function(page) pour la page
pages {Number} max. pages en page (defaut: 3 -> demi + page actuelle + demi)
scrolltop {Boolean} défile automatiquement vers le haut lorsque l'utilisateur change de page
Sélecteur jQuery parent {String} pour l'obtention de la hauteur, permet une zone fixe avec des barres de défilement personnalisées
margin {Number} une marge pour parent (par défaut : 0)
marginxs {Number} en option, une marge supérieure/inférieure ensemble pour la largeur d'écran xs
marginsm une marge supérieure / inférieure pour la largeur d'écran sm
marginmd une marge supérieure / inférieure pour la largeur d'écran md
marginlg une marge supérieure / inférieure pour la largeur d'écran lg
pluralizeitems une pluralisation pour le nombre de tous les éléments, formulaire: # zero,# one,# two-four,# five and more (si vide, le compte sera caché)
pluralizepages une pluralisation pour le nombre de tous les éléments, formulaire: # zero,# one,# two-four,# five and more (si vide, le compte sera caché)
modulo {Number} peut ajouter des éléments vides avec l'objet { EMPTY: 1 } (defaut: 0)
nopages {Boolean} peut cacher la page si les pages sont inférieures à 2 (defaut: false)

Modèle :

Le modèle doit être dans le format ci-dessous :

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

Disposition tangentielle :

body {String} contient tous les éléments rendus, la sortie est HTML
page {Numéro} numéro de page actuel
pages {Numéro} nombre de pages
count {Numéro} nombre d'articles

Article Tangulaire :

model contient un objet de Array
Le second modèle $ contient des informations sur la source de données { index: Number, page: Number, pages: Number, count: Number, value: YOUR_DATA }

Utilisez-le avec <ui-component name="serverlisting">. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans DEF.fallback (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence MIT.

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>