• downloads
• basics
• advanced
• Binding
• Respond
• Template
• Background
• Lightbox
• Slideshow
• Gallery
• Tabs
• Accordion
• Carousel
• Parallax
• Ticker
• Cycle
• Animation
• Zoom
• Menu
• Tooltip
• Paginate
• Sort
• Filter
• Form
• Validate
• Ajax
• Chart
• Plugin
• API
• Scroll
• Partially
• Summary
• Limit
• Hide
• Remove
• Show
• Showandhide
• Loop
• Random
• Encode
• Split
• Live
• Key
• Replace
• Fontsize
• Swap
• Lorem

Hi, stranger

jKit is growing almost daily, if you don’t find what you need, let us know with a post on the community forum or our social pages. Hey, who knows, maybe it’s already on our ToDo list.

Content Summary

jKit Button

If you like jKit, use and want to support the project, here’s a small button you can use to link to the jKit website.

Btw, if you did something really nice with jKit, send us a link to your work and if we like it, we would sure love to feature it.

Paginate command

Lets you create paginated content.

Basic Usage (HTML)

data-jkit="[paginate:limit=5;animation=fade]"

Advanced Init (JavaScript)

$('#myelement').jKit('paginate', { 'limit': '5', 'animation': 'fade' });

Options

Events

Examples

Table example:

Paginate the rows of a table:

<table width="100%" data-jkit="[paginate:limit=5;container=tbody]">
	<thead>
		<tr>
			<th>Name</th>
			<th>Location</th>
			<th>Birthday</th>
			<th>Category</th>
			<th>Status</th>
			<th>Superior</th>
			<th>Price (CHF)</th>
		</tr>
	</thead>
	<tbody>
		<tr><td>Mr. Max Keller</td><td>CH-7278 Davos Monstein</td><td>1-29-1986</td><td>freelancer</td><td>active</td><td>#120</td><td>1.00</td></tr>
		<tr><td>Ms. Sophia Roth</td><td>CH-3186 Düdingen</td><td>2-16-1955</td><td>freelancer</td><td>active</td><td>#120</td><td>25.25</td></tr>
		<tr><td>Mr. Fredi Baumann</td><td>CH-6543 Arvigo</td><td>11-21-1993</td><td>freelancer</td><td>active</td><td></td><td>2.99</td></tr>
		<tr><td>Ms. Hannah Zimmermann</td><td>LI-9493 Mauren</td><td>6-26-1967</td><td>freelancer</td><td>active</td><td>#1168</td><td>48.95</td></tr>
		<tr><td>Ms. Maja Brunner</td><td>D-21207 Seevetal</td><td>10-22-1934</td><td>trainee</td><td>active</td><td>#120</td><td>200.10</td></tr>
		<tr><td>Mr. Tom Fischer</td><td>LI-9492 Eschen</td><td>5-19-1955</td><td>freelancer</td><td>inactive</td><td>#1168</td><td>-5.05</td></tr>
		<tr><td>Mr. Kon Fischer</td><td>LI-9492 Eschen</td><td>5-19-1955</td><td>freelancer</td><td>inactive</td><td>#1168</td><td>-5.05</td></tr>
		<tr><td>Ms. Alina Gerber</td><td>D-21710 Engelschoff</td><td>10-15-1981</td><td>employee</td><td>active</td><td>#1168</td><td>10</td></tr>
		<tr><td>Mr. Tim Gerber</td><td>CH-6543 Arvigo</td><td>12-8-1943</td><td>freelancer</td><td>active</td><td>#120</td><td>4721.45</td></tr>
		<tr><td>Mr. Felix Meier</td><td>LI-9486 Schaanwald</td><td>8-26-1975</td><td>guest</td><td>active</td><td>#120</td><td>12.55</td></tr>
		<tr><td>Mr. Fredi Müller</td><td>LI-9486 Schaanwald</td><td>10-24-1953</td><td>trainee</td><td>active</td><td>#120</td><td>354.50</td></tr>
		<tr><td>Mr. Tim Gerber</td><td>CH-1773 Léchelles</td><td>12-25-1966</td><td>freelancer</td><td>active</td><td></td><td>42.85</td></tr>
		<tr><td>Ms. Lilli Meyer</td><td>D-21207 Seevetal</td><td>11-29-1938</td><td>guest</td><td>active</td><td></td><td>87.41</td></tr>
		<tr><td>Ms. Emilie Fischer</td><td>D-04299 Leipzig</td><td>11-7-1942</td><td>freelancer</td><td>active</td><td>#463</td><td>354.01</td></tr>
		<tr><td>Mr. Fredi Graf</td><td>CH-6534 S. Vittore</td><td>12-7-1971</td><td>employee</td><td>active</td><td>#120</td><td>14.12</td></tr>
		<tr><td>Ms. Cordelia Weber</td><td>CH-6543 Arvigo</td><td>2-23-1967</td><td>employee</td><td>active</td><td>#120</td><td>10.25</td></tr>
	</tbody>
</table>

List example:

Paginate the entries of a list by the height of the elments and fade in the new content:

<ul style="width:250px" data-jkit="[paginate:by=height;limit=100;animation=fade;pos=before]">
	<li>jh sdgjkgh fjdhsgdfjkhgfjkdhsg jhjksdgh fjkdhg jkfdshjkg jkfdh sgjkhfdjkshg fjhgjkfhdjsghjksh g</li>
	<li>hdjh gjkdfhgj khfdjkgha jfhgkj gdsalhd f </li>
	<li>j dsfjk hdjf gdshafg hdsgfa hjhdfg sdhjgfjh dsfahj ghdfg dsahgfhjsdfgh ab</li>
	<li>j dhsfkajhdj fghjkdhg ajfhjghd sjhagjjkhgfjdh gjkhdfjkahgj</li>
	<li>dh safhjkl hgfdjhasjdkghjhdajkhg jdfh gahjkd hsajghj fghadfjk hjgkh jkhg dfa</li>
	<li>d skhafmh gjhdfjka ghjghjk dashjgjkhf adhfg jdhajk sg</li>
	<li>d sfhajhdjfhjsda gjh jl</li>
	<li>d shfjklh djkahfgjk dajksghjkghadsj jkgh jdashjk ghjksadg jgh ljhdjgks ad sjhaflkhf jkadghjh gjklhdgajhkjljksagl asdg</li>
	<li>d dhjsfga hjgdsagads jdsha hfj hj salhfjd shakhfd jkahsd fjkdsagfjkgfdjhsagl fjhgsda l</li>
	<li>jj sakdflh jkh djkhfjdsajhf jdsfhgdshfhjdfh jkhdsjd sfagjklg dfsjajdgjkgdsajkl jdas gljkds akl</li>
	<li>dmh safhgjk dashjf kgjkfgd sajkgfjk sdjhgf lsdagjk gfjkdas gfg asd</li>
	<li>jgajs fgjk</li>
</ul>

Example CSS

ul.jkit-pagination, ul.jkit-pagination li {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
ul.jkit-pagination {
	margin-top: 10px;
}
ul.jkit-pagination li {
	display: inline;
	background: #333;
	color: #fff;
	padding: 6px;
	padding-top: 3px;
	padding-bottom: 2px;
	cursor: pointer;
	cursor: hand;
	margin-right: 5px;
}
ul.jkit-pagination li.active {
	background: #f30;
}

Replacements

There are currently no replacements for this command.

[ Learn more about replacements ]

Discussions

Do you have questions or do you want to suggest new features? Than head over to our new community:

[ jKit Community ]