With this plugin I tried to achieve the goal to have a fully functional pagination for usage in areas with a very limited amount of space, like sidebars. To make the pagination more compact it shows by default only the “first”, “previous”, “next”, “last” button, together with a button showing the current page. After clicking on that last mentioned button, a list with proceeding and following pages will be displayed. Those list are shown vertically following the idea that i should be used for sidebars. This kind of layout allows to have huge numbers of pages (several hundreds) without the pagination to screw the overall page layout.


.tinypagination( options )

  • options¬†A map of data containing the user settings.¬† All settings are optional.

.tinypagination( method [, parameter1 [, parameter2] ] )

  • method A string containing the name of the method to be called.


Name Default Value Description
change function(page, sender) {} Callback function called everytime the page value changes.
classBig tpBig The class name representing the big button.
classBottom tpBottom The class name representing the bottom page list.
classButton tpButton The class name representing all buttons excluding the list buttons.
classList tpList The class name representing both page lists.
classListButton tpListButton The class name representing the list buttons.
classSmall tpSmall The class name representing the all small buttons.
classTop tpTop The class name representing the top page list.
contentFirst << The content of the “first” button.
contentLast >> The content of the “last” button.
contentNext > The content of the “next” button.
contentPrevious < The content of the “previous” button.
contentSeperator / The seperator used for the “current” button t o seperate the current page from the max. page.
current 1 The page currently visible page. The first page is 1, not 0.
pages 1 The amount of pages.
steps [1, 2, 3] The steps used for the page lists. [1,2,3,8] would generate for page 50 the following page lists: [42,47,48,49], [51,52,53,58]
tag div The tag used for all HTML elements the plugin is creating.


Name Parameters Description
destroy Destroys the HTML elements and event handlers created by the plugin.
first Jumps to the first page.
previous Jumps to the previous page.
next Jumps to the next page.
last Jumps to the last page.
page int page Jumps to the given page.
exists int page Checks whether the given page exists. Returns true or false.
options object options, boolean reinit Expands the internal options object with the given options. If reinit is set to true, the pagination will be re-initialized.


<div id="list">
<div id="title">Persons</div>
<ul id="items">
	<li>Person 1</li>
	<li>Person 2</li>
	<li>Person 3</li>
	<li>Person 4</li>
	<li>Person 5</li>
	<li>Person 6</li>
	<li>Person 7</li>
	<li>Person 8</li>
	<li>Person 9</li>
	<li>Person 10</li>
<div id="pagination"></div>


// Init
    'current' : 1,
    'pages' : 50,
    'change' : function(page, sender) {
        var items = $('#items li');
        for (var i = 0; i < items.length; i++) {
            $(items.get(i)).html('Person ' + ((page - 1) * 10 + i + 1));

// Public methods
$('#pagination').tinypagination('page', 7);
  { 'current' : 7, 'steps' : [2,4,6] });
  { 'current' : 7, 'steps' : [2,4,6] }, true);
console.log($('#pagination').tinypagination('exists', 40));