Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

⚒ Modular components for RecyclerView development enforcing clean, reusable and testable code, with built-in support for paging and complex hierarchies of data.

Stars: ✭ 75 (-10.71%)

Mutual labels: pagination

Cursor Pagination

Cursor pagination for your Laravel API

Stars: ✭ 47 (-44.05%)

Mutual labels: pagination

Ngx Pagination

Pagination for Angular

Stars: ✭ 1,080 (+1185.71%)

Mutual labels: pagination

Mmm Pages

Add pages to your MagicMirror²!

Stars: ✭ 61 (-27.38%)

Mutual labels: pagination

Paginate firestore

A flutter package to simplify pagination with firestore data 🗃

Stars: ✭ 40 (-52.38%)

Mutual labels: pagination

Pagination view

Flutter package to simplify pagination of list of items from the internet.

Stars: ✭ 82 (-2.38%)

Mutual labels: pagination

React Grid Table

A modular table, based on a CSS grid layout, optimized for customization.

Stars: ✭ 57 (-32.14%)

Mutual labels: pagination

Dotnetpaging

Data paging with ASP.NET and ASP.NET Core

Stars: ✭ 70 (-16.67%)

Mutual labels: pagination

Sesame

Android architecture components made right

Stars: ✭ 48 (-42.86%)

Mutual labels: pagination

Templateplugin

A template for creating minecraft plugin from 1.7.10 to 1.16.2

Stars: ✭ 51 (-39.29%)

Mutual labels: pagination

Utils

🛠 Lightweight utilities for string & array manipulation, image handling, safe JSON encoding/decoding, validation, slug or strong password generating etc.

Stars: ✭ 1,158 (+1278.57%)

Mutual labels: pagination

Datagrid

Datagrid for Laravel v5

Stars: ✭ 44 (-47.62%)

Mutual labels: pagination

Lightquery

Lightweight solution for sorting and paging Asp.Net Core API results

Stars: ✭ 75 (-10.71%)

Mutual labels: pagination

Ng Bootstrap

Angular powered Bootstrap

Stars: ✭ 7,872 (+9271.43%)

Mutual labels: pagination

Squid

Declarative and Reactive Networking for Swift.

Stars: ✭ 61 (-27.38%)

Mutual labels: pagination

Filterable

Filtering from incoming params in Elixir/Ecto/Phoenix with easy to use DSL.

Stars: ✭ 83 (-1.19%)

Mutual labels: pagination

Queryql

Easily add filtering, sorting, and pagination to your Node.js REST API through your old friend: the query string!

Stars: ✭ 76 (-9.52%)

Mutual labels: pagination

Sequelize Paginate

Sequelize model plugin for add paginate method

Stars: ✭ 70 (-16.67%)

Mutual labels: pagination

View All Similar Projects ➔

pagination

Pagination for javascript/nodejs

usage example

var pagination = require('pagination');
var paginator = pagination.create('search', {prelink:'/', current: 1, rowsPerPage: 200, totalResult: 10020});
console.log(paginator.render());

Or customized renderer

This example show how to generate markup for twitter boostrap, see example/twitter.html for template rendering

var pagination = require('pagination')

var boostrapPaginator = new pagination.TemplatePaginator({
	prelink:'/', current: 3, rowsPerPage: 200,
	totalResult: 10020, slashSeparator: true,
	template: function(result) {
		var i, len, prelink;
		var html = '<div><ul class="pagination">';
		if(result.pageCount < 2) {
			html += '</ul></div>';
			return html;
		}
		prelink = this.preparePreLink(result.prelink);
		if(result.previous) {
			html += '<li class="page-item"><a class="page-link" href="' + prelink + result.previous + '">' + this.options.translator('PREVIOUS') + '</a></li>';
		}
		if(result.range.length) {
			for( i = 0, len = result.range.length; i < len; i++) {
				if(result.range[i] === result.current) {
					html += '<li class="active page-item"><a class="page-link" href="' + prelink + result.range[i] + '">' + result.range[i] + '</a></li>';
				} else {
					html += '<li class="page-item"><a class="page-link" href="' + prelink + result.range[i] + '">' + result.range[i] + '</a></li>';
				}
			}
		}
		if(result.next) {
			html += '<li class="page-item"><a class="page-link" href="' + prelink + result.next + '" class="paginator-next">' + this.options.translator('NEXT') + '</a></li>';
		}
		html += '</ul></div>';
		return html;
	}
});
console.log(boostrapPaginator.render());

OR

var pagination = require('pagination');
var paginator = new pagination.SearchPaginator({prelink:'/', current: 10, rowsPerPage: 200, totalResult: 10020});
console.log(paginator.render());
// output (without newlines)

<div class="paginator">
	<a href="/?page=9" class="paginator-previous">Previous</a>
	<a href="/?page=8" class="paginator-page paginator-page-first">8</a>
	<a href="/?page=9" class="paginator-page">9</a>
	<a href="/?page=10" class="paginator-current">10</a>
	<a href="/?page=11" class="paginator-page">11</a>
	<a href="/?page=12" class="paginator-page paginator-page-last">12</a>
	<a href="/?page=11" class="paginator-next">Next</a>
</div>

OR need data from the calculation

var pagination = require('pagination');
var paginator = new pagination.SearchPaginator({prelink:'/', current: 3, rowsPerPage: 200, totalResult: 10020});
console.log(paginator.getPaginationData());

// output
{ prelink: '/',
  current: 3,
  previous: 2,
  next: 4,
  first: 1,
  last: 51,
  range: [ 1, 2, 3, 4, 5 ],
  fromResult: 401,
  toResult: 600,
  totalResult: 10020,
  pageCount: 51 }

Pagination on client side

<html>
	<head>
	<script src="../release/pagination.full.min.js"></script>
	</head>
	<body>
		<div id="paging"></div>
		<script type="text/javascript">
		(function() {
			var paginator = new pagination.ItemPaginator({prelink:'/', current: 3, rowsPerPage: 200, totalResult: 10020});
			var html = paginator.render();
			var paginator = pagination.create('search', {prelink:'/', current: 1, rowsPerPage: 200, totalResult: 10020});
			html += paginator.render();
			document.getElementById("paging").innerHTML = html;
		})();
		</script>
	</body>
</html>

You can browse example folder for more. Release folder contains all mimified versions for browser. To customize your need you can use ./bin/build.js -h html += paginator.render();

Classes

SearchPaginator(options)

options See Options bellow

ItemPaginator(options)

options See Options bellow

TemplatePaginator(options)

options See Options bellow

This class will render the markup as desired. The options must contains property "template" It can be either a template string or a compiled template. The local variables available in the template are

prelink String
preparedPreLink String
current Integer
previous Integer
next Integer
first Integer
last Integer
range Array
fromResult Integer
toResult Integer
totalResult Integer
pageCount Integer
translations Object with properties NEXT, PREVIOUS, FIRST, LAST, CURRENT_PAGE_REPORT

API

Paginator.getPaginationData()

Return an object contains data for rendering markup. See example above.

Paginator.set(option, value)

Set value to a single for option. See options section bellow

Paginator.preparePreLink(prelink)

prelink String

Append page param to the link

Paginator.render()

Return the rendered markup

pagination.create(type, options)

type String
options Object see Options section bellow

Wrapper for create instance of classes above

pagination.TemplateEngine.parse(str, options)

See pagination.TemplateEngine.compile bellow

pagination.TemplateEngine.compile(str, options)

str Template string
options object which can contains .open .close .cache and .id

Options

Object to pass to paginator classes (second argument when using create function)

totalResult: {Integer}

Number of total items in result set

prelink: {String}

Link to append the page-param

rowsPerPage: {Integer}

Number of items per page, default to 10

pageLinks: {Integer}

Number of links to create in page range, default to 5. This value will be ignored when using item pagination.

current: {Integer}

Indicate which page is the current one. Page always starts with 1.

translationCache: {Boolean}

To indicate if the result from CURRENT_PAGE_REPORT translation can be cached or not. Default is false. The cache is global and will be the same for all instances which have specified translationCacheKey as bellow.

translationCacheKey: {String}

For supporting multiple versions of translation of CURRENT_PAGE_REPORT. It can use for multilanguages or different formats. Default is "en"

translator: {Function}

For translations of FIRST, NEXT, ... Simple example

var translations = {
	'PREVIOUS' : 'Voorgaand',
	'NEXT' : 'Volgende',
	'FIRST' : 'Eerst',
	'LAST' : 'Laatste',
	'CURRENT_PAGE_REPORT' : 'Resulten {FromResult} - {ToResult} van {TotalResult}'
};

var item = new ItemPaginator({
	prelink : '/',
	pageLinks : 5,
	current : 5,
	totalResult : 100,
	translator : function(str) {
		return translations[str];
	}
});

pageParamName: {String}

The name of the page parameter. Default is "page"

slashSeparator: {Boolean}

Indicate if using slash instead of equal sign, ie /page/2 instead of /?page=2, default is false.

template: {String | Function}

This can be a template string or a compiled template (function). The compiled function will be called with an object as argument.

Acknowledgements

Template engine is taking mostly from https://github.com/vanng822/ejs which is a fork of https://github.com/visionmedia/ejs

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Stars: ✭ 84

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (1) 🔗