j-ServerListing

jComponent 20 · jcomponent@20 component Ejemplo cargado con jComponent 20

Configuración:

paginate {String} enlace a una función function(page) para paginación
pages {Number} máx. páginas en paginación (predeterminado: 3 --> mitad + página actual + mitad)
scrolltop {Boolean} se desplaza hacia arriba automáticamente cuando el usuario cambia de página
parent {String} Selector jQuery para obtención de altura, habilita área fija con barras de desplazamiento personalizadas.
margin {Number} un margen para parent (predeterminado: 0)
marginxs {Number} opcional, un margen superior/inferior juntos para el ancho de pantalla xs
marginsm un margen superior/inferior juntos para el ancho de pantalla sm
marginmd un margen superior/inferior juntos para el ancho de pantalla md
marginlg un margen superior/inferior juntos para el ancho de pantalla lg
pluralizeitems una pluralización para el recuento de todos los elementos, formulario: # zero,# one,# two-four,# five and more (si está vacío, el contador estará oculto)
pluralizepages una pluralización para el recuento de todos los elementos, formulario: # zero,# one,# two-four,# five and more (si está vacío, el contador estará oculto)
modulo {Number} puede agregar elementos vacíos con el objeto { EMPTY: 1 } (predeterminado: 0)
nopages {Boolean} puede ocultar la paginación si las páginas son menores que 2 (predeterminado: false)

Modelo:

El modelo debe tener el siguiente formato:

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

Diseño tangular:

body {String} contiene todos los elementos renderizados, la salida es HTML
page {Number} número de página actual
pages {Número} recuento de páginas
count {Número} recuento de elementos

Artículo tangular:

model contiene un objeto de Array
el segundo modelo $ contiene información sobre la fuente de datos { index: Number, page: Number, pages: Number, count: Number, value: YOUR_DATA }

Úselo con <ui-component name="serverlisting">. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en DEF.fallback (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia 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>