- ID de exploración:
- ec62914d-4a86-4ac8-a9c3-eb72d634cff1Finalizado
- URL enviada:
- https://pagination.js.org/
- Informe finalizado:
Enlaces: 22 encontrados
Los enlaces salientes identificados en la página
| Enlace | Texto |
|---|---|
| https://github.com/superRaytin/paginationjs | Fork on GitHub |
| https://www.flickr.com/photos/184657140@N03/54201598446/ | Leopard Classic Cat |
| https://www.flickr.com/photos/beagle2001/54201962765/ | 2024_12_13 (106) |
| https://www.flickr.com/photos/beagle2001/54201782108/ | 2024_12_13 (112) |
| https://www.flickr.com/photos/beagle2001/54201794569/ | 2024_12_13 (139) |
| https://www.flickr.com/photos/198163410@N04/54201407821/ | Brusy_easyHDR-high-contrast |
| https://www.flickr.com/photos/198163410@N04/54201653113/ | Brusy_easyHDR-def-ost-nas |
| https://www.flickr.com/photos/198163410@N04/54201407661/ | Brusy_easyHDR-interior2 |
| https://www.flickr.com/photos/198163410@N04/54201660114/ | Brusy_easyHDR-selective-color-red |
| https://www.flickr.com/photos/198163410@N04/54201835675/ | Brusy_easyHDR-default |
Variables JavaScript: 18 encontradas
Las variables JavaScript globales cargadas en el objeto de ventana de una página son variables declaradas fuera de las funciones y a las que se puede acceder desde cualquier lugar del código en el ámbito actual
| Nombre | Tipo |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| $ | function |
| jQuery | function |
| q | object |
| PR_SHOULD_USE_CONTINUATION | boolean |
| prettyPrintOne | function |
| prettyPrint | function |
| PR | object |
Mensajes de registro de la consola: 15 encontrados
Mensajes registrados en la consola web
| Tipo | Categoría | Registro |
|---|---|---|
| log | javascript |
|
| log | javascript |
|
| log | javascript |
|
| log | javascript |
|
| log | javascript |
|
| log | javascript |
|
| log | javascript |
|
| log | javascript |
|
| log | javascript |
|
| log | javascript |
|
| log | javascript |
|
| log | javascript |
|
| log | javascript |
|
| log | javascript |
|
| error | network |
|
HTML
El cuerpo HTML sin procesar de la página
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Pagination.js | Home</title>
<link href="css/base.css" rel="stylesheet">
<link href="css/prettify.css" rel="stylesheet">
<link href="dist/2.6.0/pagination.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript" async="" src="https://www.googletagmanager.com/gtag/js?id=G-6LNRM3GT2E&cx=c&_slc=1"></script></head>
<body>
<a href="https://github.com/superRaytin/paginationjs">
<img style="position: absolute; top: 0; right: 0; border: 0;" src="images/forkme_right_green_007200.png" alt="Fork me on GitHub">
</a>
<div class="topbar">
<div class="inner">
<ul class="clearfix">
<li><a href="#" class="active">Home</a></li>
<li><a href="docs/index.html">Docs</a></li>
<li><a href="https://github.com/superRaytin/paginationjs" target="_blank">Fork on GitHub</a></li>
</ul>
</div>
</div>
<div class="header">
<div class="title">Pagination.js<span>2.6.0</span></div>
<div class="desc">
A jQuery plugin to provide simple yet fully customisable pagination.<br>
Almost all the ways you can think of on pagination.
</div>
<div class="download">
<div class="build-buttons">
<a class="build-button-source" href="dist/2.6.0/pagination.js">Pagination.js</a>
<a class="build-button-zipped" href="dist/2.6.0/pagination.min.js">Pagination.min.js <span class="fileSize">15.0K</span></a>
</div>
</div>
</div>
<div class="wrapper">
<div class="demo" id="J-demo"><div class="demo-section clearfix">
<a name="normal"></a><div class="demo-section-title">Normal</div>
<div class="inner-left preview" id="demo1">
<div class="data-container"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul></div>
<div class="paginationjs"><div class="paginationjs-pages"><ul><li class="paginationjs-prev disabled "><a>‹</a></li><li class="paginationjs-page J-paginationjs-page active" data-num="1"><a>1</a></li><li class="paginationjs-page J-paginationjs-page " data-num="2"><a>2</a></li><li class="paginationjs-page J-paginationjs-page " data-num="3"><a>3</a></li><li class="paginationjs-page J-paginationjs-page " data-num="4"><a>4</a></li><li class="paginationjs-page J-paginationjs-page " data-num="5"><a>5</a></li><li class="paginationjs-ellipsis disabled"><a>...</a></li><li class="paginationjs-page paginationjs-last J-paginationjs-page " data-num="20"><a>20</a></li><li class="paginationjs-next J-paginationjs-next " data-num="2" title="Next page"><a>›</a></li></ul></div></div></div>
<div class="inner-right code">
<pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><code><span class="pln">$</span><span class="pun">(</span><span class="str">'#demo'</span><span class="pun">).</span><span class="pln">pagination</span><span class="pun">({</span></code></li><li class="L1"><code><span class="pln"> dataSource</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="lit">2</span><span class="pun">,</span><span class="pln"> </span><span class="lit">3</span><span class="pun">,</span><span class="pln"> </span><span class="lit">4</span><span class="pun">,</span><span class="pln"> </span><span class="lit">5</span><span class="pun">,</span><span class="pln"> </span><span class="lit">6</span><span class="pun">,</span><span class="pln"> </span><span class="lit">7</span><span class="pun">,</span><span class="pln"> </span><span class="pun">...</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">195</span><span class="pun">],</span></code></li><li class="L2"><code><span class="pln"> callback</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">data</span><span class="pun">,</span><span class="pln"> pagination</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L3"><code><span class="pln"> </span><span class="com">// template method of yourself</span></code></li><li class="L4"><code><span class="pln"> </span><span class="kwd">var</span><span class="pln"> html </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">template</span><span class="pun">(</span><span class="pln">data</span><span class="pun">);</span></code></li><li class="L5"><code><span class="pln"> dataContainer</span><span class="pun">.</span><span class="pln">html</span><span class="pun">(</span><span class="pln">html</span><span class="pun">);</span></code></li><li class="L6"><code><span class="pln"> </span><span class="pun">}</span></code></li><li class="L7"><code><span class="pun">})</span></code></li></ol></pre>
</div>
</div><div class="demo-section clearfix">
<a name="only_page_numbers"></a><div class="demo-section-title">Only page numbers</div>
<div class="inner-left preview" id="demo7">
<div class="data-container" style="min-height: 175px; max-height: 175px;"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div>
<div class="paginationjs paginationjs-big"><div class="paginationjs-pages"><ul><li class="paginationjs-page J-paginationjs-page active" data-num="1"><a>1</a></li><li class="paginationjs-page J-paginationjs-page " data-num="2"><a>2</a></li><li class="paginationjs-page J-paginationjs-page " data-num="3"><a>3</a></li><li class="paginationjs-page J-paginationjs-page " data-num="4"><a>4</a></li><li class="paginationjs-page J-paginationjs-page " data-num="5"><a>5</a></li><li class="paginationjs-ellipsis disabled"><a>...</a></li><li class="paginationjs-page paginationjs-last J-paginationjs-page " data-num="20"><a>20</a></li></ul></div></div></div>
<div class="inner-right code">
<pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><code><span class="pln">$</span><span class="pun">(</span><span class="str">'#demo'</span><span class="pun">).</span><span class="pln">pagination</span><span class="pun">({</span></code></li><li class="L1"><code><span class="pln"> dataSource</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="lit">2</span><span class="pun">,</span><span class="pln"> </span><span class="lit">3</span><span class="pun">,</span><span class="pln"> </span><span class="lit">4</span><span class="pun">,</span><span class="pln"> </span><span class="lit">5</span><span class="pun">,</span><span class="pln"> </span><span class="lit">6</span><span class="pun">,</span><span class="pln"> </span><span class="lit">7</span><span class="pun">,</span><span class="pln"> </span><span class="pun">...</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">100</span><span class="pun">],</span></code></li><li class="L2"><code><span class="pln"> pageSize</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5</span><span class="pun">,</span></code></li><li class="L3"><code><span class="pln"> showPrevious</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span></code></li><li class="L4"><code><span class="pln"> showNext</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span></code></li><li class="L5"><code><span class="pln"> callback</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">data</span><span class="pun">,</span><span class="pln"> pagination</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L6"><code><span class="pln"> </span><span class="com">// template method of yourself</span></code></li><li class="L7"><code><span class="pln"> </span><span class="kwd">var</span><span class="pln"> html </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">template</span><span class="pun">(</span><span class="pln">data</span><span class="pun">);</span></code></li><li class="L8"><code><span class="pln"> dataContainer</span><span class="pun">.</span><span class="pln">html</span><span class="pun">(</span><span class="pln">html</span><span class="pun">);</span></code></li><li class="L9"><code><span class="pln"> </span><span class="pun">}</span></code></li><li class="L0"><code><span class="pun">})</span></code></li></ol></pre>
</div>
</div><div class="demo-section clearfix">
<a name="show_page_size_changer"></a><div class="demo-section-title">Show page size changer</div>
<div class="inner-left preview" id="demo20">
<div class="data-container"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div>
<div class="paginationjs paginationjs-big"><div class="paginationjs-pages"><ul><li class="paginationjs-prev disabled "><a>‹</a></li><li class="paginationjs-page J-paginationjs-page active" data-num="1"><a>1</a></li><li class="paginationjs-page J-paginationjs-page " data-num="2"><a>2</a></li><li class="paginationjs-page J-paginationjs-page " data-num="3"><a>3</a></li><li class="paginationjs-page J-paginationjs-page " data-num="4"><a>4</a></li><li class="paginationjs-page J-paginationjs-page " data-num="5"><a>5</a></li><li class="paginationjs-ellipsis disabled"><a>...</a></li><li class="paginationjs-page paginationjs-last J-paginationjs-page " data-num="39"><a>39</a></li><li class="paginationjs-next J-paginationjs-next " data-num="2" title="Next page"><a>›</a></li></ul></div><div class="paginationjs-size-changer"><select class="J-paginationjs-size-select"><option value="5" selected="">5 / page</option><option value="10">10 / page</option><option value="20">20 / page</option><option value="50">50 / page</option><option value="100">100 / page</option></select></div></div></div>
<div class="inner-right code">
<pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><code><span class="pln">$</span><span class="pun">(</span><span class="str">'#demo'</span><span class="pun">).</span><span class="pln">pagination</span><span class="pun">({</span></code></li><li class="L1"><code><span class="pln"> dataSource</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="lit">2</span><span class="pun">,</span><span class="pln"> </span><span class="lit">3</span><span class="pun">,</span><span class="pln"> </span><span class="lit">4</span><span class="pun">,</span><span class="pln"> </span><span class="lit">5</span><span class="pun">,</span><span class="pln"> </span><span class="lit">6</span><span class="pun">,</span><span class="pln"> </span><span class="lit">7</span><span class="pun">,</span><span class="pln"> </span><span class="pun">...</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">195</span><span class="pun">],</span></code></li><li class="L2"><code><span class="pln"> pageSize</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5</span><span class="pun">,</span></code></li><li class="L3"><code><span class="pln"> showSizeChanger</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span></code></li><li class="L4"><code><span class="pln"> callback</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">data</span><span class="pun">,</span><span class="pln"> pagination</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L5"><code><span class="pln"> </span><span class="com">// template method of yourself</span></code></li><li class="L6"><code><span class="pln"> </span><span class="kwd">var</span><span class="pln"> html </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">template</span><span class="pun">(</span><span class="pln">data</span><span class="pun">);</span></code></li><li class="L7"><code><span class="pln"> dataContainer</span><span class="pun">.</span><span class="pln">html</span><span class="pun">(</span><span class="pln">html</span><span class="pun">);</span></code></li><li class="L8"><code><span class="pln"> </span><span class="pun">}</span></code></li><li class="L9"><code><span class="pun">})</span></code></li></ol></pre>
</div>
</div><div class="demo-section clearfix">
<a name="show_go_button"></a><div class="demo-section-title">Show "go" input & button</div>
<div class="inner-left preview" id="demo8">
<div class="data-container" style="min-height: 175px; max-height: 175px;"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div>
<div class="paginationjs paginationjs-big"><div class="paginationjs-pages"><ul><li class="paginationjs-prev disabled "><a>‹</a></li><li class="paginationjs-page J-paginationjs-page active" data-num="1"><a>1</a></li><li class="paginationjs-page J-paginationjs-page " data-num="2"><a>2</a></li><li class="paginationjs-page J-paginationjs-page " data-num="3"><a>3</a></li><li class="paginationjs-page J-paginationjs-page " data-num="4"><a>4</a></li><li class="paginationjs-page J-paginationjs-page " data-num="5"><a>5</a></li><li class="paginationjs-ellipsis disabled"><a>...</a></li><li class="paginationjs-page paginationjs-last J-paginationjs-page " data-num="8"><a>8</a></li><li class="paginationjs-next J-paginationjs-next " data-num="2" title="Next page"><a>›</a></li></ul></div><div class="paginationjs-go-input"><input type="text" class="J-paginationjs-go-pagenumber"></div><div class="paginationjs-go-button"><input type="button" class="J-paginationjs-go-button" value="Go"></div></div></div>
<div class="inner-right code">
<pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><code><span class="pln">$</span><span class="pun">(</span><span class="str">'#demo'</span><span class="pun">).</span><span class="pln">pagination</span><span class="pun">({</span></code></li><li class="L1"><code><span class="pln"> dataSource</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="lit">2</span><span class="pun">,</span><span class="pln"> </span><span class="lit">3</span><span class="pun">,</span><span class="pln"> </span><span class="lit">4</span><span class="pun">,</span><span class="pln"> </span><span class="lit">5</span><span class="pun">,</span><span class="pln"> </span><span class="lit">6</span><span class="pun">,</span><span class="pln"> </span><span class="lit">7</span><span class="pun">,</span><span class="pln"> </span><span class="pun">...</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">40</span><span class="pun">],</span></code></li><li class="L2"><code><span class="pln"> pageSize</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5</span><span class="pun">,</span></code></li><li class="L3"><code><span class="pln"> showGoInput</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span></code></li><li class="L4"><code><span class="pln"> showGoButton</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span></code></li><li class="L5"><code><span class="pln"> callback</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">data</span><span class="pun">,</span><span class="pln"> pagination</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L6"><code><span class="pln"> </span><span class="com">// template method of yourself</span></code></li><li class="L7"><code><span class="pln"> </span><span class="kwd">var</span><span class="pln"> html </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">template</span><span class="pun">(</span><span class="pln">data</span><span class="pun">);</span></code></li><li class="L8"><code><span class="pln"> dataContainer</span><span class="pun">.</span><span class="pln">html</span><span class="pun">(</span><span class="pln">html</span><span class="pun">);</span></code></li><li class="L9"><code><span class="pln"> </span><span class="pun">}</span></code></li><li class="L0"><code><span class="pun">})</span></code></li></ol></pre>
</div>
</div><div class="demo-section clearfix">
<a name="auto_hide"></a><div class="demo-section-title">Auto hide previous & next button</div>
<div class="inner-left preview" id="demo12">
<div class="data-container" style="min-height: 175px; max-height: 175px;"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div>
<div class="paginationjs paginationjs-big"><div class="paginationjs-pages"><ul><li class="paginationjs-page J-paginationjs-page active" data-num="1"><a>1</a></li><li class="paginationjs-page J-paginationjs-page " data-num="2"><a>2</a></li><li class="paginationjs-page J-paginationjs-page " data-num="3"><a>3</a></li><li class="paginationjs-page J-paginationjs-page " data-num="4"><a>4</a></li><li class="paginationjs-page J-paginationjs-page " data-num="5"><a>5</a></li><li class="paginationjs-page J-paginationjs-page " data-num="6"><a>6</a></li><li class="paginationjs-page J-paginationjs-page " data-num="7"><a>7</a></li><li class="paginationjs-next J-paginationjs-next " data-num="2" title="Next page"><a>›</a></li></ul></div></div></div>
<div class="inner-right code">
<pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><code><span class="pln">$</span><span class="pun">(</span><span class="str">'#demo'</span><span class="pun">).</span><span class="pln">pagination</span><span class="pun">({</span></code></li><li class="L1"><code><span class="pln"> dataSource</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="lit">2</span><span class="pun">,</span><span class="pln"> </span><span class="lit">3</span><span class="pun">,</span><span class="pln"> </span><span class="lit">4</span><span class="pun">,</span><span class="pln"> </span><span class="lit">5</span><span class="pun">,</span><span class="pln"> </span><span class="lit">6</span><span class="pun">,</span><span class="pln"> </span><span class="lit">7</span><span class="pun">,</span><span class="pln"> </span><span class="pun">...</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">35</span><span class="pun">],</span></code></li><li class="L2"><code><span class="pln"> pageSize</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5</span><span class="pun">,</span></code></li><li class="L3"><code><span class="pln"> autoHidePrevious</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span></code></li><li class="L4"><code><span class="pln"> autoHideNext</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span></code></li><li class="L5"><code><span class="pln"> callback</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">data</span><span class="pun">,</span><span class="pln"> pagination</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L6"><code><span class="pln"> </span><span class="com">// template method of yourself</span></code></li><li class="L7"><code><span class="pln"> </span><span class="kwd">var</span><span class="pln"> html </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">template</span><span class="pun">(</span><span class="pln">data</span><span class="pun">);</span></code></li><li class="L8"><code><span class="pln"> dataContainer</span><span class="pun">.</span><span class="pln">html</span><span class="pun">(</span><span class="pln">html</span><span class="pun">);</span></code></li><li class="L9"><code><span class="pln"> </span><span class="pun">}</span></code></li><li class="L0"><code><span class="pun">})</span></code></li></ol></pre>
</div>
</div><div class="demo-section clearfix">
<a name="mini"></a><div class="demo-section-title">Mini</div>
<div class="inner-left preview" id="demo5">
<div class="data-container" style="min-height: 175px; max-height: 175px;"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div>
<div class="paginationjs paginationjs-big"><div class="paginationjs-nav J-paginationjs-nav">Total 50 items</div><div class="paginationjs-pages"><ul><li class="paginationjs-prev disabled "><a>‹</a></li><li class="paginationjs-next J-paginationjs-next " data-num="2" title="Next page"><a>›</a></li></ul></div></div></div>
<div class="inner-right code">
<pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><code><span class="pln">$</span><span class="pun">(</span><span class="str">'#demo'</span><span class="pun">).</span><span class="pln">pagination</span><span class="pun">({</span></code></li><li class="L1"><code><span class="pln"> dataSource</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="lit">2</span><span class="pun">,</span><span class="pln"> </span><span class="lit">3</span><span class="pun">,</span><span class="pln"> </span><span class="lit">4</span><span class="pun">,</span><span class="pln"> </span><span class="lit">5</span><span class="pun">,</span><span class="pln"> </span><span class="lit">6</span><span class="pun">,</span><span class="pln"> </span><span class="lit">7</span><span class="pun">,</span><span class="pln"> </span><span class="pun">...</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">50</span><span class="pun">],</span></code></li><li class="L2"><code><span class="pln"> pageSize</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5</span><span class="pun">,</span></code></li><li class="L3"><code><span class="pln"> showPageNumbers</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span></code></li><li class="L4"><code><span class="pln"> showNavigator</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span></code></li><li class="L5"><code><span class="pln"> callback</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">data</span><span class="pun">,</span><span class="pln"> pagination</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L6"><code><span class="pln"> </span><span class="com">// template method of yourself</span></code></li><li class="L7"><code><span class="pln"> </span><span class="kwd">var</span><span class="pln"> html </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">template</span><span class="pun">(</span><span class="pln">data</span><span class="pun">);</span></code></li><li class="L8"><code><span class="pln"> dataContainer</span><span class="pun">.</span><span class="pln">html</span><span class="pun">(</span><span class="pln">html</span><span class="pun">);</span></code></li><li class="L9"><code><span class="pln"> </span><span class="pun">}</span></code></li><li class="L0"><code><span class="pun">})</span></code></li></ol></pre>
</div>
</div><div class="demo-section clearfix">
<a name="show_all_pages"></a><div class="demo-section-title">Show all pages</div>
<div class="inner-left preview" id="demo14">
<div class="data-container" style="min-height: 175px; max-height: 175px;"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div>
<div class="paginationjs paginationjs-big"><div class="paginationjs-pages"><ul><li class="paginationjs-prev disabled "><a>‹</a></li><li class="paginationjs-page J-paginationjs-page active" data-num="1"><a>1</a></li><li class="paginationjs-page J-paginationjs-page " data-num="2"><a>2</a></li><li class="paginationjs-page J-paginationjs-page " data-num="3"><a>3</a></li><li class="paginationjs-page J-paginationjs-page " data-num="4"><a>4</a></li><li class="paginationjs-page J-paginationjs-page " data-num="5"><a>5</a></li><li class="paginationjs-page J-paginationjs-page " data-num="6"><a>6</a></li><li class="paginationjs-page J-paginationjs-page " data-num="7"><a>7</a></li><li class="paginationjs-page J-paginationjs-page " data-num="8"><a>8</a></li><li class="paginationjs-page J-paginationjs-page " data-num="9"><a>9</a></li><li class="paginationjs-page J-paginationjs-page " data-num="10"><a>10</a></li><li class="paginationjs-next J-paginationjs-next " data-num="2" title="Next page"><a>›</a></li></ul></div></div></div>
<div class="inner-right code">
<pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><code><span class="pln">$</span><span class="pun">(</span><span class="str">'#demo'</span><span class="pun">).</span><span class="pln">pagination</span><span class="pun">({</span></code></li><li class="L1"><code><span class="pln"> dataSource</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="lit">2</span><span class="pun">,</span><span class="pln"> </span><span class="lit">3</span><span class="pun">,</span><span class="pln"> </span><span class="lit">4</span><span class="pun">,</span><span class="pln"> </span><span class="lit">5</span><span class="pun">,</span><span class="pln"> </span><span class="lit">6</span><span class="pun">,</span><span class="pln"> </span><span class="lit">7</span><span class="pun">,</span><span class="pln"> </span><span class="pun">...</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">50</span><span class="pun">],</span></code></li><li class="L2"><code><span class="pln"> pageSize</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5</span><span class="pun">,</span></code></li><li class="L3"><code><span class="pln"> pageRange</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">,</span></code></li><li class="L4"><code><span class="pln"> showPageNumbers</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span></code></li><li class="L5"><code><span class="pln"> callback</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">data</span><span class="pun">,</span><span class="pln"> pagination</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L6"><code><span class="pln"> </span><span class="com">// template method of yourself</span></code></li><li class="L7"><code><span class="pln"> </span><span class="kwd">var</span><span class="pln"> html </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">template</span><span class="pun">(</span><span class="pln">data</span><span class="pun">);</span></code></li><li class="L8"><code><span class="pln"> dataContainer</span><span class="pun">.</span><span class="pln">html</span><span class="pun">(</span><span class="pln">html</span><span class="pun">);</span></code></li><li class="L9"><code><span class="pln"> </span><span class="pun">}</span></code></li><li class="L0"><code><span class="pun">})</span></code></li></ol></pre>
</div>
</div><div class="demo-section clearfix">
<a name="datasource_jsonp"></a><div class="demo-section-title">Asynchronous or JSONP</div>
<div class="inner-left preview" id="demo3">
<div class="data-container" style="min-height: 175px; max-height: 285px;"><ul><li><a href="https://www.flickr.com/photos/184657140@N03/54201598446/">Leopard Classic Cat</a></li><li><a href="https://www.flickr.com/photos/beagle2001/54201962765/">2024_12_13 (106)</a></li><li><a href="https://www.flickr.com/photos/beagle2001/54201782108/">2024_12_13 (112)</a></li><li><a href="https://www.flickr.com/photos/beagle2001/54201794569/">2024_12_13 (139)</a></li><li><a href="https://www.flickr.com/photos/198163410@N04/54201407821/">Brusy_easyHDR-high-contrast</a></li><li><a href="https://www.flickr.com/photos/198163410@N04/54201653113/">Brusy_easyHDR-def-ost-nas</a></li><li><a href="https://www.flickr.com/photos/198163410@N04/54201407661/">Brusy_easyHDR-interior2</a></li><li><a href="https://www.flickr.com/photos/198163410@N04/54201660114/">Brusy_easyHDR-selective-color-red</a></li><li><a href="https://www.flickr.com/photos/198163410@N04/54201835675/">Brusy_easyHDR-default</a></li><li><a href="https://www.flickr.com/photos/198163410@N04/54201835515/">Brusy_easyHDR-dramatic-strong</a></li><li><a href="https://www.flickr.com/photos/198163410@N04/54200505572/">Brusy_easyHDR-enhance3</a></li><li><a href="https://www.flickr.com/photos/198163410@N04/54201835210/">Brusy_easyHDR-high-contrast4</a></li><li><a href="https://www.flickr.com/photos/198163410@N04/54201834505/">Brusy_easyHDR-night-strong</a></li><li><a href="https://www.flickr.com/photos/188648886@N04/54200350492/">Royal Jordanian Air Force F-16A 247</a></li><li><a href="https://www.flickr.com/photos/149796217@N08/54201228031/">Cat, proudly showing off her new necklace. IMG_3464</a></li><li><a href="https://www.flickr.com/photos/bentwhisker/54201328578/">Fritz</a></li><li><a href="https://www.flickr.com/photos/bazoka/54201196729/">SL3_L1010102_C1</a></li><li><a href="https://www.flickr.com/photos/bazoka/54200044172/">SL3_L1010114_C1</a></li><li><a href="https://www.flickr.com/photos/bazoka/54201186193/">SL3_L1010093_C1</a></li><li><a href="https://www.flickr.com/photos/bazoka/54200944791/">SL3_L1010077_C1</a></li></ul></div>
<div class="paginationjs paginationjs-big"><div class="paginationjs-pages"><ul><li class="paginationjs-prev disabled "><a>‹</a></li><li class="paginationjs-page J-paginationjs-page active" data-num="1"><a>1</a></li><li class="paginationjs-page J-paginationjs-page " data-num="2"><a>2</a></li><li class="paginationjs-page J-paginationjs-page " data-num="3"><a>3</a></li><li class="paginationjs-page J-paginationjs-page " data-num="4"><a>4</a></li><li class="paginationjs-page J-paginationjs-page " data-num="5"><a>5</a></li><li class="paginationjs-page J-paginationjs-page " data-num="6"><a>6</a></li><li class="paginationjs-next J-paginationjs-next " data-num="2" title="Next page"><a>›</a></li></ul></div></div></div>
<div class="inner-right code">
<pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><code><span class="pln">$</span><span class="pun">(</span><span class="str">'#demo'</span><span class="pun">).</span><span class="pln">pagination</span><span class="pun">({</span></code></li><li class="L1"><code><span class="pln"> dataSource</span><span class="pun">:</span><span class="pln"> </span><span class="str">'https://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?'</span><span class="pun">,</span></code></li><li class="L2"><code><span class="pln"> locator</span><span class="pun">:</span><span class="pln"> </span><span class="str">'items'</span><span class="pun">,</span></code></li><li class="L3"><code><span class="pln"> totalNumber</span><span class="pun">:</span><span class="pln"> </span><span class="lit">120</span><span class="pun">,</span></code></li><li class="L4"><code><span class="pln"> pageSize</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20</span><span class="pun">,</span></code></li><li class="L5"><code><span class="pln"> ajax</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L6"><code><span class="pln"> beforeSend</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L7"><code><span class="pln"> dataContainer</span><span class="pun">.</span><span class="pln">html</span><span class="pun">(</span><span class="str">'Loading data from flickr.com ...'</span><span class="pun">);</span></code></li><li class="L8"><code><span class="pln"> </span><span class="pun">}</span></code></li><li class="L9"><code><span class="pln"> </span><span class="pun">},</span></code></li><li class="L0"><code><span class="pln"> callback</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">data</span><span class="pun">,</span><span class="pln"> pagination</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L1"><code><span class="pln"> </span><span class="com">// template method of yourself</span></code></li><li class="L2"><code><span class="pln"> </span><span class="kwd">var</span><span class="pln"> html </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">template</span><span class="pun">(</span><span class="pln">data</span><span class="pun">);</span></code></li><li class="L3"><code><span class="pln"> dataContainer</span><span class="pun">.</span><span class="pln">html</span><span class="pun">(</span><span class="pln">html</span><span class="pun">);</span></code></li><li class="L4"><code><span class="pln"> </span><span class="pun">}</span></code></li><li class="L5"><code><span class="pun">})</span></code></li></ol></pre>
</div>
</div><div class="demo-section clearfix">
<a name="totalNumber_locator"></a><div class="demo-section-title">Asynchronous & Dynamic total number</div>
<div class="inner-left preview" id="demo13">
<div class="data-container" style="min-height: 175px; max-height: 285px;"><ul><li><a href="https://www.flickr.com/photos/184657140@N03/54201598446/">Leopard Classic Cat</a></li><li><a href="https://www.flickr.com/photos/beagle2001/54201782108/">2024_12_13 (112)</a></li><li><a href="https://www.flickr.com/photos/beagle2001/54201794569/">2024_12_13 (139)</a></li><li><a href="https://www.flickr.com/photos/198163410@N04/54201407821/">Brusy_easyHDR-high-contrast</a></li><li><a href="https://www.flickr.com/photos/198163410@N04/54201653113/">Brusy_easyHDR-def-ost-nas</a></li><li><a href="https://www.flickr.com/photos/198163410@N04/54201407661/">Brusy_easyHDR-interior2</a></li><li><a href="https://www.flickr.com/photos/198163410@N04/54201660114/">Brusy_easyHDR-selective-color-red</a></li><li><a href="https://www.flickr.com/photos/198163410@N04/54201835675/">Brusy_easyHDR-default</a></li><li><a href="https://www.flickr.com/photos/198163410@N04/54201835515/">Brusy_easyHDR-dramatic-strong</a></li><li><a href="https://www.flickr.com/photos/198163410@N04/54200505572/">Brusy_easyHDR-enhance3</a></li><li><a href="https://www.flickr.com/photos/198163410@N04/54201835210/">Brusy_easyHDR-high-contrast4</a></li><li><a href="https://www.flickr.com/photos/198163410@N04/54201834505/">Brusy_easyHDR-night-strong</a></li><li><a href="https://www.flickr.com/photos/188648886@N04/54200350492/">Royal Jordanian Air Force F-16A 247</a></li><li><a href="https://www.flickr.com/photos/149796217@N08/54201228031/">Cat, proudly showing off her new necklace. IMG_3464</a></li><li><a href="https://www.flickr.com/photos/bentwhisker/54201328578/">Fritz</a></li><li><a href="https://www.flickr.com/photos/bazoka/54201196729/">SL3_L1010102_C1</a></li><li><a href="https://www.flickr.com/photos/bazoka/54200044172/">SL3_L1010114_C1</a></li><li><a href="https://www.flickr.com/photos/bazoka/54201186193/">SL3_L1010093_C1</a></li><li><a href="https://www.flickr.com/photos/bazoka/54200944791/">SL3_L1010077_C1</a></li><li><a href="https://www.flickr.com/photos/bazoka/54200944491/">SL3_L1010088_C1</a></li></ul></div>
<div class="paginationjs paginationjs-big"><div class="paginationjs-pages"><ul><li class="paginationjs-prev disabled "><a>‹</a></li><li class="paginationjs-page J-paginationjs-page active" data-num="1"><a>1</a></li><li class="paginationjs-page J-paginationjs-page " data-num="2"><a>2</a></li><li class="paginationjs-page J-paginationjs-page " data-num="3"><a>3</a></li><li class="paginationjs-page J-paginationjs-page " data-num="4"><a>4</a></li><li class="paginationjs-page J-paginationjs-page " data-num="5"><a>5</a></li><li class="paginationjs-ellipsis disabled"><a>...</a></li><li class="paginationjs-page paginationjs-last J-paginationjs-page " data-num="29"><a>29</a></li><li class="paginationjs-next J-paginationjs-next " data-num="2" title="Next page"><a>›</a></li></ul></div></div></div>
<div class="inner-right code">
<pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><code><span class="pln">$</span><span class="pun">(</span><span class="str">'#demo'</span><span class="pun">).</span><span class="pln">pagination</span><span class="pun">({</span></code></li><li class="L1"><code><span class="pln"> dataSource</span><span class="pun">:</span><span class="pln"> </span><span class="str">'https://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?'</span><span class="pun">,</span></code></li><li class="L2"><code><span class="pln"> locator</span><span class="pun">:</span><span class="pln"> </span><span class="str">'items'</span><span class="pun">,</span></code></li><li class="L3"><code><span class="pln"> totalNumberLocator</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">response</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L4"><code><span class="pln"> </span><span class="com">// you can return totalNumber by analyzing response content</span></code></li><li class="L5"><code><span class="pln"> </span><span class="kwd">return</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">floor</span><span class="pun">(</span><span class="typ">Math</span><span class="pun">.</span><span class="pln">random</span><span class="pun">()</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="pun">(</span><span class="lit">1000</span><span class="pln"> </span><span class="pun">-</span><span class="pln"> </span><span class="lit">100</span><span class="pun">))</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="lit">100</span><span class="pun">;</span></code></li><li class="L6"><code><span class="pln"> </span><span class="pun">},</span></code></li><li class="L7"><code><span class="pln"> pageSize</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20</span><span class="pun">,</span></code></li><li class="L8"><code><span class="pln"> ajax</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L9"><code><span class="pln"> beforeSend</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L0"><code><span class="pln"> dataContainer</span><span class="pun">.</span><span class="pln">html</span><span class="pun">(</span><span class="str">'Loading data from flickr.com ...'</span><span class="pun">);</span></code></li><li class="L1"><code><span class="pln"> </span><span class="pun">}</span></code></li><li class="L2"><code><span class="pln"> </span><span class="pun">},</span></code></li><li class="L3"><code><span class="pln"> callback</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">data</span><span class="pun">,</span><span class="pln"> pagination</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L4"><code><span class="pln"> </span><span class="com">// template method of yourself</span></code></li><li class="L5"><code><span class="pln"> </span><span class="kwd">var</span><span class="pln"> html </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">template</span><span class="pun">(</span><span class="pln">data</span><span class="pun">);</span></code></li><li class="L6"><code><span class="pln"> dataContainer</span><span class="pun">.</span><span class="pln">html</span><span class="pun">(</span><span class="pln">html</span><span class="pun">);</span></code></li><li class="L7"><code><span class="pln"> </span><span class="pun">}</span></code></li><li class="L8"><code><span class="pun">})</span></code></li></ol></pre>
</div>
</div><div class="demo-section clearfix">
<a name="specify_default"></a><div class="demo-section-title">Specify default</div>
<div class="inner-left preview" id="demo2">
<div class="data-container" style="min-height: 175px; max-height: 175px;"><ul><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li></ul></div>
<div class="paginationjs paginationjs-big"><div class="paginationjs-pages"><ul><li class="paginationjs-prev J-paginationjs-previous " data-num="2" title="Previous page"><a>‹</a></li><li class="paginationjs-page J-paginationjs-page " data-num="1"><a>1</a></li><li class="paginationjs-page J-paginationjs-page " data-num="2"><a>2</a></li><li class="paginationjs-page J-paginationjs-page active" data-num="3"><a>3</a></li><li class="paginationjs-page J-paginationjs-page " data-num="4"><a>4</a></li><li class="paginationjs-page J-paginationjs-page " data-num="5"><a>5</a></li><li class="paginationjs-page J-paginationjs-page " data-num="6"><a>6</a></li><li class="paginationjs-page J-paginationjs-page " data-num="7"><a>7</a></li><li class="paginationjs-next J-paginationjs-next " data-num="4" title="Next page"><a>›</a></li></ul></div></div></div>
<div class="inner-right code">
<pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><code><span class="pln">$</span><span class="pun">(</span><span class="str">'#demo'</span><span class="pun">).</span><span class="pln">pagination</span><span class="pun">({</span></code></li><li class="L1"><code><span class="pln"> dataSource</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="lit">2</span><span class="pun">,</span><span class="pln"> </span><span class="lit">3</span><span class="pun">,</span><span class="pln"> </span><span class="lit">4</span><span class="pun">,</span><span class="pln"> </span><span class="lit">5</span><span class="pun">,</span><span class="pln"> </span><span class="lit">6</span><span class="pun">,</span><span class="pln"> </span><span class="lit">7</span><span class="pun">,</span><span class="pln"> </span><span class="pun">...</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">35</span><span class="pun">],</span></code></li><li class="L2"><code><span class="pln"> pageSize</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5</span><span class="pun">,</span></code></li><li class="L3"><code><span class="pln"> pageNumber</span><span class="pun">:</span><span class="pln"> </span><span class="lit">3</span><span class="pun">,</span></code></li><li class="L4"><code><span class="pln"> callback</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">data</span><span class="pun">,</span><span class="pln"> pagination</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L5"><code><span class="pln"> </span><span class="com">// template method of yourself</span></code></li><li class="L6"><code><span class="pln"> </span><span class="kwd">var</span><span class="pln"> html </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">template</span><span class="pun">(</span><span class="pln">data</span><span class="pun">);</span></code></li><li class="L7"><code><span class="pln"> dataContainer</span><span class="pun">.</span><span class="pln">html</span><span class="pun">(</span><span class="pln">html</span><span class="pun">);</span></code></li><li class="L8"><code><span class="pln"> </span><span class="pun">}</span></code></li><li class="L9"><code><span class="pun">})</span></code></li></ol></pre>
</div>
</div><div class="demo-section clearfix">
<a name="format_result_data"></a><div class="demo-section-title">Format result data</div>
<div class="inner-left preview" id="demo6">
<div class="data-container" style="min-height: 175px; max-height: 280px;"><ul><li>1 - good guys</li><li>2 - good guys</li><li>3 - good guys</li><li>4 - good guys</li><li>5 - good guys</li><li>6 - good guys</li><li>7 - good guys</li><li>8 - good guys</li></ul></div>
<div class="paginationjs paginationjs-big"><div class="paginationjs-pages"><ul><li class="paginationjs-prev disabled "><a>‹</a></li><li class="paginationjs-page J-paginationjs-page active" data-num="1"><a>1</a></li><li class="paginationjs-page J-paginationjs-page " data-num="2"><a>2</a></li><li class="paginationjs-page J-paginationjs-page " data-num="3"><a>3</a></li><li class="paginationjs-page J-paginationjs-page " data-num="4"><a>4</a></li><li class="paginationjs-page J-paginationjs-page " data-num="5"><a>5</a></li><li class="paginationjs-ellipsis disabled"><a>...</a></li><li class="paginationjs-page paginationjs-last J-paginationjs-page " data-num="13"><a>13</a></li><li class="paginationjs-next J-paginationjs-next " data-num="2" title="Next page"><a>›</a></li></ul></div></div></div>
<div class="inner-right code">
<pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><code><span class="pln">$</span><span class="pun">(</span><span class="str">'#demo'</span><span class="pun">).</span><span class="pln">pagination</span><span class="pun">({</span></code></li><li class="L1"><code><span class="pln"> dataSource</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="lit">2</span><span class="pun">,</span><span class="pln"> </span><span class="lit">3</span><span class="pun">,</span><span class="pln"> </span><span class="lit">4</span><span class="pun">,</span><span class="pln"> </span><span class="lit">5</span><span class="pun">,</span><span class="pln"> </span><span class="lit">6</span><span class="pun">,</span><span class="pln"> </span><span class="lit">7</span><span class="pun">,</span><span class="pln"> </span><span class="pun">...</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">100</span><span class="pun">],</span></code></li><li class="L2"><code><span class="pln"> pageSize</span><span class="pun">:</span><span class="pln"> </span><span class="lit">8</span><span class="pun">,</span></code></li><li class="L3"><code><span class="pln"> formatResult</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">data</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L4"><code><span class="pln"> </span><span class="kwd">var</span><span class="pln"> result </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[];</span></code></li><li class="L5"><code><span class="pln"> </span><span class="kwd">for</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">var</span><span class="pln"> i </span><span class="pun">=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> len </span><span class="pun">=</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">length</span><span class="pun">;</span><span class="pln"> i </span><span class="pun"><</span><span class="pln"> len</span><span class="pun">;</span><span class="pln"> i</span><span class="pun">++)</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L6"><code><span class="pln"> result</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="pln">data</span><span class="pun">[</span><span class="pln">i</span><span class="pun">]</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="str">' - good guys'</span><span class="pun">);</span></code></li><li class="L7"><code><span class="pln"> </span><span class="pun">}</span></code></li><li class="L8"><code><span class="pln"> </span><span class="kwd">return</span><span class="pln"> result</span><span class="pun">;</span></code></li><li class="L9"><code><span class="pln"> </span><span class="pun">},</span></code></li><li class="L0"><code><span class="pln"> callback</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">data</span><span class="pun">,</span><span class="pln"> pagination</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L1"><code><span class="pln"> </span><span class="com">// template method of yourself</span></code></li><li class="L2"><code><span class="pln"> </span><span class="kwd">var</span><span class="pln"> html </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">template</span><span class="pun">(</span><span class="pln">data</span><span class="pun">);</span></code></li><li class="L3"><code><span class="pln"> dataContainer</span><span class="pun">.</span><span class="pln">html</span><span class="pun">(</span><span class="pln">html</span><span class="pun">);</span></code></li><li class="L4"><code><span class="pln"> </span><span class="pun">}</span></code></li><li class="L5"><code><span class="pun">})</span></code></li></ol></pre>
</div>
</div><div class="demo-section clearfix">
<a name="format_result_data2"></a><div class="demo-section-title">Another format result data</div>
<div class="inner-left preview" id="demo9">
<div class="data-container" style="min-height: 175px; max-height: 175px;"><ul><li>1 - bad guys</li><li>2 - bad guys</li><li>3 - bad guys</li><li>4 - bad guys</li><li>5 - bad guys</li></ul></div>
<div class="paginationjs paginationjs-big"><div class="paginationjs-pages"><ul><li class="paginationjs-prev disabled "><a>‹</a></li><li class="paginationjs-page J-paginationjs-page active" data-num="1"><a>1</a></li><li class="paginationjs-page J-paginationjs-page " data-num="2"><a>2</a></li><li class="paginationjs-page J-paginationjs-page " data-num="3"><a>3</a></li><li class="paginationjs-page J-paginationjs-page " data-num="4"><a>4</a></li><li class="paginationjs-page J-paginationjs-page " data-num="5"><a>5</a></li><li class="paginationjs-ellipsis disabled"><a>...</a></li><li class="paginationjs-page paginationjs-last J-paginationjs-page " data-num="20"><a>20</a></li><li class="paginationjs-next J-paginationjs-next " data-num="2" title="Next page"><a>›</a></li></ul></div></div></div>
<div class="inner-right code">
<pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><code><span class="pln">$</span><span class="pun">(</span><span class="str">'#demo'</span><span class="pun">).</span><span class="pln">pagination</span><span class="pun">({</span></code></li><li class="L1"><code><span class="pln"> dataSource</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[{</span><span class="pln">a </span><span class="pun">:</span><span class="lit">1</span><span class="pun">},</span><span class="pln"> </span><span class="pun">{</span><span class="pln">a </span><span class="pun">:</span><span class="lit">2</span><span class="pun">},</span><span class="pln"> </span><span class="pun">{</span><span class="pln">a </span><span class="pun">:</span><span class="lit">3</span><span class="pun">},</span><span class="pln"> </span><span class="pun">{</span><span class="pln">a </span><span class="pun">:</span><span class="lit">4</span><span class="pun">},</span><span class="pln"> </span><span class="pun">...</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">a </span><span class="pun">:</span><span class="lit">50</span><span class="pun">}],</span></code></li><li class="L2"><code><span class="pln"> pageSize</span><span class="pun">:</span><span class="pln"> </span><span class="lit">8</span><span class="pun">,</span></code></li><li class="L3"><code><span class="pln"> formatResult</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">data</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L4"><code><span class="pln"> </span><span class="kwd">for</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">var</span><span class="pln"> i </span><span class="pun">=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> len </span><span class="pun">=</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">length</span><span class="pun">;</span><span class="pln"> i </span><span class="pun"><</span><span class="pln"> len</span><span class="pun">;</span><span class="pln"> i</span><span class="pun">++)</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L5"><code><span class="pln"> data</span><span class="pun">[</span><span class="pln">i</span><span class="pun">].</span><span class="pln">a </span><span class="pun">=</span><span class="pln"> data</span><span class="pun">[</span><span class="pln">i</span><span class="pun">].</span><span class="pln">a </span><span class="pun">+</span><span class="pln"> </span><span class="str">' - bad guys'</span><span class="pun">;</span></code></li><li class="L6"><code><span class="pln"> </span><span class="pun">}</span></code></li><li class="L7"><code><span class="pln"> </span><span class="pun">},</span></code></li><li class="L8"><code><span class="pln"> callback</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">data</span><span class="pun">,</span><span class="pln"> pagination</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L9"><code><span class="pln"> </span><span class="com">// template method of yourself</span></code></li><li class="L0"><code><span class="pln"> </span><span class="kwd">var</span><span class="pln"> html </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">template</span><span class="pun">(</span><span class="pln">data</span><span class="pun">);</span></code></li><li class="L1"><code><span class="pln"> dataContainer</span><span class="pun">.</span><span class="pln">html</span><span class="pun">(</span><span class="pln">html</span><span class="pun">);</span></code></li><li class="L2"><code><span class="pln"> </span><span class="pun">}</span></code></li><li class="L3"><code><span class="pun">})</span></code></li></ol></pre>
</div>
</div><div class="demo-section clearfix">
<a name="format_navigator"></a><div class="demo-section-title">Format navigator</div>
<div class="inner-left preview" id="demo4"><div class="paginationjs paginationjs-big"><div class="paginationjs-nav J-paginationjs-nav">1-5 of 15 items</div><div class="paginationjs-pages"><ul><li class="paginationjs-prev disabled "><a>‹</a></li><li class="paginationjs-page J-paginationjs-page active" data-num="1"><a>1</a></li><li class="paginationjs-page J-paginationjs-page " data-num="2"><a>2</a></li><li class="paginationjs-page J-paginationjs-page " data-num="3"><a>3</a></li><li class="paginationjs-next J-paginationjs-next " data-num="2" title="Next page"><a>›</a></li></ul></div></div>
<div class="data-container" style="min-height: 175px; max-height: 175px;"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div>
</div>
<div class="inner-right code">
<pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><code><span class="pln">$</span><span class="pun">(</span><span class="str">'#demo'</span><span class="pun">).</span><span class="pln">pagination</span><span class="pun">({</span></code></li><li class="L1"><code><span class="pln"> dataSource</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="lit">2</span><span class="pun">,</span><span class="pln"> </span><span class="lit">3</span><span class="pun">,</span><span class="pln"> </span><span class="lit">4</span><span class="pun">,</span><span class="pln"> </span><span class="lit">5</span><span class="pun">,</span><span class="pln"> </span><span class="lit">6</span><span class="pun">,</span><span class="pln"> </span><span class="lit">7</span><span class="pun">,</span><span class="pln"> </span><span class="pun">...</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">15</span><span class="pun">],</span></code></li><li class="L2"><code><span class="pln"> pageSize</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5</span><span class="pun">,</span></code></li><li class="L3"><code><span class="pln"> showNavigator</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span></code></li><li class="L4"><code><span class="pln"> formatNavigator</span><span class="pun">:</span><span class="pln"> </span><span class="str">'<%= rangeStart %>-<%= rangeEnd %> of <%= totalNumber %> items'</span><span class="pun">,</span></code></li><li class="L5"><code><span class="pln"> position</span><span class="pun">:</span><span class="pln"> </span><span class="str">'top'</span><span class="pun">,</span></code></li><li class="L6"><code><span class="pln"> callback</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">data</span><span class="pun">,</span><span class="pln"> pagination</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L7"><code><span class="pln"> </span><span class="com">// template method of yourself</span></code></li><li class="L8"><code><span class="pln"> </span><span class="kwd">var</span><span class="pln"> html </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">template</span><span class="pun">(</span><span class="pln">data</span><span class="pun">);</span></code></li><li class="L9"><code><span class="pln"> dataContainer</span><span class="pun">.</span><span class="pln">html</span><span class="pun">(</span><span class="pln">html</span><span class="pun">);</span></code></li><li class="L0"><code><span class="pln"> </span><span class="pun">}</span></code></li><li class="L1"><code><span class="pun">})</span></code></li></ol></pre>
</div>
</div><div class="demo-section clearfix">
<a name="format_go_input"></a><div class="demo-section-title">Format "go" input</div>
<div class="inner-left preview" id="demo10">
<div class="data-container" style="min-height: 175px; max-height: 175px;"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div>
<div class="paginationjs paginationjs-big"><div class="paginationjs-pages"><ul><li class="paginationjs-prev disabled "><a>‹</a></li><li class="paginationjs-page J-paginationjs-page active" data-num="1"><a>1</a></li><li class="paginationjs-page J-paginationjs-page " data-num="2"><a>2</a></li><li class="paginationjs-page J-paginationjs-page " data-num="3"><a>3</a></li><li class="paginationjs-page J-paginationjs-page " data-num="4"><a>4</a></li><li class="paginationjs-page J-paginationjs-page " data-num="5"><a>5</a></li><li class="paginationjs-next J-paginationjs-next " data-num="2" title="Next page"><a>›</a></li></ul></div><div class="paginationjs-go-input">go to <input type="text" class="J-paginationjs-go-pagenumber"> st/rd/th</div><div class="paginationjs-go-button"><input type="button" class="J-paginationjs-go-button" value="Go"></div></div></div>
<div class="inner-right code">
<pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><code><span class="pln">$</span><span class="pun">(</span><span class="str">'#demo'</span><span class="pun">).</span><span class="pln">pagination</span><span class="pun">({</span></code></li><li class="L1"><code><span class="pln"> dataSource</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="lit">2</span><span class="pun">,</span><span class="pln"> </span><span class="lit">3</span><span class="pun">,</span><span class="pln"> </span><span class="lit">4</span><span class="pun">,</span><span class="pln"> </span><span class="lit">5</span><span class="pun">,</span><span class="pln"> </span><span class="lit">6</span><span class="pun">,</span><span class="pln"> </span><span class="lit">7</span><span class="pun">,</span><span class="pln"> </span><span class="pun">...</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">25</span><span class="pun">],</span></code></li><li class="L2"><code><span class="pln"> pageSize</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5</span><span class="pun">,</span></code></li><li class="L3"><code><span class="pln"> showGoInput</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span></code></li><li class="L4"><code><span class="pln"> showGoButton</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span></code></li><li class="L5"><code><span class="pln"> formatGoInput</span><span class="pun">:</span><span class="pln"> </span><span class="str">'go to <%= input %> st/rd/th'</span><span class="pun">,</span></code></li><li class="L6"><code><span class="pln"> callback</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">data</span><span class="pun">,</span><span class="pln"> pagination</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L7"><code><span class="pln"> </span><span class="com">// template method of yourself</span></code></li><li class="L8"><code><span class="pln"> </span><span class="kwd">var</span><span class="pln"> html </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">template</span><span class="pun">(</span><span class="pln">data</span><span class="pun">);</span></code></li><li class="L9"><code><span class="pln"> dataContainer</span><span class="pun">.</span><span class="pln">html</span><span class="pun">(</span><span class="pln">html</span><span class="pun">);</span></code></li><li class="L0"><code><span class="pln"> </span><span class="pun">}</span></code></li><li class="L1"><code><span class="pun">})</span></code></li></ol></pre>
</div>
</div><div class="demo-section clearfix">
<a name="methods_events"></a><div class="demo-section-title">Methods & Events</div>
<div class="inner-left preview" style="width: 51%" id="demo11">
<div class="data-container" style="min-height: 175px; max-height: 175px;"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div>
<div class="paginationjs paginationjs-big"><div class="paginationjs-pages"><ul><li class="paginationjs-prev disabled "><a>‹</a></li><li class="paginationjs-page J-paginationjs-page active" data-num="1"><a>1</a></li><li class="paginationjs-page J-paginationjs-page " data-num="2"><a>2</a></li><li class="paginationjs-page J-paginationjs-page " data-num="3"><a>3</a></li><li class="paginationjs-page J-paginationjs-page " data-num="4"><a>4</a></li><li class="paginationjs-page J-paginationjs-page " data-num="5"><a>5</a></li><li class="paginationjs-ellipsis disabled"><a>...</a></li><li class="paginationjs-page paginationjs-last J-paginationjs-page " data-num="20"><a>20</a></li><li class="paginationjs-next J-paginationjs-next " data-num="2" title="Next page"><a>›</a></li></ul></div><div class="paginationjs-go-input"><input type="text" class="J-paginationjs-go-pagenumber"></div><div class="paginationjs-go-button"><input type="button" class="J-paginationjs-go-button" value="Go"></div></div></div>
<div class="inner-right code" style="width: 46%">
<div class="actions clearfix" id="J-actions">
<span class="button" data-action="previous">Previous</span>
<span class="button" data-action="next">Next</span>
<span class="button" data-action="go" data-params="5">Go (5)</span>
<span class="button" data-action="disable">Disable</span>
<span class="button" data-action="enable">Enable</span>
<span class="button" data-action="destroy">Destroy</span>
<span class="button" data-action="show">Show</span>
<span class="button" data-action="hide">Hide</span>
<span class="button" data-action="isDisabled" data-type="get">is disabled?</span>
<span class="button" data-action="getTotalPage" data-type="get">Total page</span>
<span class="button" data-action="getCurrentPageNum" data-type="get">Current page number</span>
<span class="button" data-action="getCurrentPageData" data-type="get">Current page data</span>
</div>
</div>
</div>
<div class="demo-section clearfix">
<div class="inner-left events-list">
<div class="title">
<label><input type="checkbox" id="J-checkAll" checked=""> Choose events to be logged:</label>
</div>
<div class="events-container" id="J-events-container"><div class="event-item"><label><input type="checkbox" value="beforeInit" id="checkbox-beforeInit" checked=""> beforeInit</label></div><div class="event-item"><label><input type="checkbox" value="beforeRender" id="checkbox-beforeRender" checked=""> beforeRender</label></div><div class="event-item"><label><input type="checkbox" value="beforePaging" id="checkbox-beforePaging" checked=""> beforePaging</label></div><div class="event-item"><label><input type="checkbox" value="beforeSizeSelectorChange" id="checkbox-beforeSizeSelectorChange" checked=""> beforeSizeSelectorChange</label></div><div class="event-item"><label><input type="checkbox" value="beforeDestroy" id="checkbox-beforeDestroy" checked=""> beforeDestroy</label></div><div class="event-item"><label><input type="checkbox" value="beforeDisable" id="checkbox-beforeDisable" checked=""> beforeDisable</label></div><div class="event-item"><label><input type="checkbox" value="beforeEnable" id="checkbox-beforeEnable" checked=""> beforeEnable</label></div><div class="event-item"><label><input type="checkbox" value="beforePreviousOnClick" id="checkbox-beforePreviousOnClick" checked=""> beforePreviousOnClick</label></div><div class="event-item"><label><input type="checkbox" value="beforePageOnClick" id="checkbox-beforePageOnClick" checked=""> beforePageOnClick</label></div><div class="event-item"><label><input type="checkbox" value="beforeNextOnClick" id="checkbox-beforeNextOnClick" checked=""> beforeNextOnClick</label></div><div class="event-item"><label><input type="checkbox" value="beforeGoInputOnEnter" id="checkbox-beforeGoInputOnEnter" checked=""> beforeGoInputOnEnter</label></div><div class="event-item"><label><input type="checkbox" value="beforeGoButtonOnClick" id="checkbox-beforeGoButtonOnClick" checked=""> beforeGoButtonOnClick</label></div><div class="event-item"><label><input type="checkbox" value="afterInit" id="checkbox-afterInit" checked=""> afterInit</label></div><div class="event-item"><label><input type="checkbox" value="afterRender" id="checkbox-afterRender" checked=""> afterRender</label></div><div class="event-item"><label><input type="checkbox" value="afterPaging" id="checkbox-afterPaging" checked=""> afterPaging</label></div><div class="event-item"><label><input type="checkbox" value="afterSizeSelectorChange" id="checkbox-afterSizeSelectorChange" checked=""> afterSizeSelectorChange</label></div><div class="event-item"><label><input type="checkbox" value="afterDestroy" id="checkbox-afterDestroy" checked=""> afterDestroy</label></div><div class="event-item"><label><input type="checkbox" value="afterDisable" id="checkbox-afterDisable" checked=""> afterDisable</label></div><div class="event-item"><label><input type="checkbox" value="afterEnable" id="checkbox-afterEnable" checked=""> afterEnable</label></div><div class="event-item"><label><input type="checkbox" value="afterPreviousOnClick" id="checkbox-afterPreviousOnClick" checked=""> afterPreviousOnClick</label></div><div class="event-item"><label><input type="checkbox" value="afterPageOnClick" id="checkbox-afterPageOnClick" checked=""> afterPageOnClick</label></div><div class="event-item"><label><input type="checkbox" value="afterNextOnClick" id="checkbox-afterNextOnClick" checked=""> afterNextOnClick</label></div><div class="event-item"><label><input type="checkbox" value="afterGoInputOnEnter" id="checkbox-afterGoInputOnEnter" checked=""> afterGoInputOnEnter</label></div><div class="event-item"><label><input type="checkbox" value="afterGoButtonOnClick" id="checkbox-afterGoButtonOnClick" checked=""> afterGoButtonOnClick</label></div><div class="event-item"><label><input type="checkbox" value="afterIsFirstPage" id="checkbox-afterIsFirstPage" checked=""> afterIsFirstPage</label></div><div class="event-item"><label><input type="checkbox" value="afterIsLastPage" id="checkbox-afterIsLastPage" checked=""> afterIsLastPage</label></div></div>
</div>
<div class="inner-right events-log">
<div class="title">Events log <span class="button" id="J-log-clear">Clear</span></div>
<ul class="log-container" id="J-log-container">
</ul>
</div>
</div></div>
</div>
<div id="gototop">Top</div>
<script async="" src="//www.google-analytics.com/analytics.js"></script><script type="text/template" id="template-demo1">
<div class="demo-section clearfix">
<div class="demo-section-title"></div>
<div class="inner-left preview">
<div class="data-container"></div>
</div>
<div class="inner-right code">
<pre><code>$('#demo').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 195],
callback: function(data, pagination) {
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})</code></pre>
</div>
</div>
</script>
<script type="text/template" id="template-demo2">
<div class="demo-section clearfix">
<div class="demo-section-title"></div>
<div class="inner-left preview">
<div class="data-container"></div>
</div>
<div class="inner-right code">
<pre><code>$('#demo').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 35],
pageSize: 5,
pageNumber: 3,
callback: function(data, pagination) {
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})</code></pre>
</div>
</div>
</script>
<script type="text/template" id="template-demo3">
<div class="demo-section clearfix">
<div class="demo-section-title"></div>
<div class="inner-left preview">
<div class="data-container"></div>
</div>
<div class="inner-right code">
<pre><code>$('#demo').pagination({
dataSource: 'https://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?',
locator: 'items',
totalNumber: 120,
pageSize: 20,
ajax: {
beforeSend: function() {
dataContainer.html('Loading data from flickr.com ...');
}
},
callback: function(data, pagination) {
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})</code></pre>
</div>
</div>
</script>
<script type="text/template" id="template-demo13">
<div class="demo-section clearfix">
<div class="demo-section-title"></div>
<div class="inner-left preview">
<div class="data-container"></div>
</div>
<div class="inner-right code">
<pre><code>$('#demo').pagination({
dataSource: 'https://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?',
locator: 'items',
totalNumberLocator: function(response) {
// you can return totalNumber by analyzing response content
return Math.floor(Math.random() * (1000 - 100)) + 100;
},
pageSize: 20,
ajax: {
beforeSend: function() {
dataContainer.html('Loading data from flickr.com ...');
}
},
callback: function(data, pagination) {
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})</code></pre>
</div>
</div>
</script>
<script type="text/template" id="template-demo4">
<div class="demo-section clearfix">
<div class="demo-section-title"></div>
<div class="inner-left preview">
<div class="data-container"></div>
</div>
<div class="inner-right code">
<pre><code>$('#demo').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 15],
pageSize: 5,
showNavigator: true,
formatNavigator: '<%= rangeStart %>-<%= rangeEnd %> of <%= totalNumber %> items',
position: 'top',
callback: function(data, pagination) {
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})</code></pre>
</div>
</div>
</script>
<script type="text/template" id="template-demo5">
<div class="demo-section clearfix">
<div class="demo-section-title"></div>
<div class="inner-left preview">
<div class="data-container"></div>
</div>
<div class="inner-right code">
<pre><code>$('#demo').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 50],
pageSize: 5,
showPageNumbers: false,
showNavigator: true,
callback: function(data, pagination) {
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})</code></pre>
</div>
</div>
</script>
<script type="text/template" id="template-demo6">
<div class="demo-section clearfix">
<div class="demo-section-title"></div>
<div class="inner-left preview">
<div class="data-container"></div>
</div>
<div class="inner-right code">
<pre><code>$('#demo').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 100],
pageSize: 8,
formatResult: function(data) {
var result = [];
for (var i = 0, len = data.length; i < len; i++) {
result.push(data[i] + ' - good guys');
}
return result;
},
callback: function(data, pagination) {
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})</code></pre>
</div>
</div>
</script>
<script type="text/template" id="template-demo9">
<div class="demo-section clearfix">
<div class="demo-section-title"></div>
<div class="inner-left preview">
<div class="data-container"></div>
</div>
<div class="inner-right code">
<pre><code>$('#demo').pagination({
dataSource: [{a :1}, {a :2}, {a :3}, {a :4}, ... , {a :50}],
pageSize: 8,
formatResult: function(data) {
for (var i = 0, len = data.length; i < len; i++) {
data[i].a = data[i].a + ' - bad guys';
}
},
callback: function(data, pagination) {
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})</code></pre>
</div>
</div>
</script>
<script type="text/template" id="template-demo7">
<div class="demo-section clearfix">
<div class="demo-section-title"></div>
<div class="inner-left preview">
<div class="data-container"></div>
</div>
<div class="inner-right code">
<pre><code>$('#demo').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 100],
pageSize: 5,
showPrevious: false,
showNext: false,
callback: function(data, pagination) {
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})</code></pre>
</div>
</div>
</script>
<script type="text/template" id="template-demo20">
<div class="demo-section clearfix">
<div class="demo-section-title"></div>
<div class="inner-left preview">
<div class="data-container"></div>
</div>
<div class="inner-right code">
<pre><code>$('#demo').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 195],
pageSize: 5,
showSizeChanger: true,
callback: function(data, pagination) {
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})</code></pre>
</div>
</div>
</script>
<script type="text/template" id="template-demo8">
<div class="demo-section clearfix">
<div class="demo-section-title"></div>
<div class="inner-left preview">
<div class="data-container"></div>
</div>
<div class="inner-right code">
<pre><code>$('#demo').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 40],
pageSize: 5,
showGoInput: true,
showGoButton: true,
callback: function(data, pagination) {
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})</code></pre>
</div>
</div>
</script>
<script type="text/template" id="template-demo10">
<div class="demo-section clearfix">
<div class="demo-section-title"></div>
<div class="inner-left preview">
<div class="data-container"></div>
</div>
<div class="inner-right code">
<pre><code>$('#demo').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 25],
pageSize: 5,
showGoInput: true,
showGoButton: true,
formatGoInput: 'go to <%= input %> st/rd/th',
callback: function(data, pagination) {
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})</code></pre>
</div>
</div>
</script>
<script type="text/template" id="template-demo11">
<div class="demo-section clearfix">
<div class="demo-section-title"></div>
<div class="inner-left preview" style="width: 51%">
<div class="data-container"></div>
</div>
<div class="inner-right code" style="width: 46%">
<div class="actions clearfix" id="J-actions">
<span class="button" data-action="previous">Previous</span>
<span class="button" data-action="next">Next</span>
<span class="button" data-action="go" data-params="5">Go (5)</span>
<span class="button" data-action="disable">Disable</span>
<span class="button" data-action="enable">Enable</span>
<span class="button" data-action="destroy">Destroy</span>
<span class="button" data-action="show">Show</span>
<span class="button" data-action="hide">Hide</span>
<span class="button" data-action="isDisabled" data-type="get">is disabled?</span>
<span class="button" data-action="getTotalPage" data-type="get">Total page</span>
<span class="button" data-action="getCurrentPageNum" data-type="get">Current page number</span>
<span class="button" data-action="getCurrentPageData" data-type="get">Current page data</span>
</div>
</div>
</div>
<div class="demo-section clearfix">
<div class="inner-left events-list">
<div class="title">
<label><input type="checkbox" id="J-checkAll" checked> Choose events to be logged:</label>
</div>
<div class="events-container" id="J-events-container">
<div class="event-item">
<label>
<input type="checkbox" value="beforeInit"> beforeInit
</label>
</div>
<div class="event-item">
<label>
<input type="checkbox" value="beforeRender"> beforeRender
</label>
</div>
</div>
</div>
<div class="inner-right events-log">
<div class="title">Events log <span class="button" id="J-log-clear">Clear</span></div>
<ul class="log-container" id="J-log-container">
</ul>
</div>
</div>
</script>
<script type="text/template" id="template-demo12">
<div class="demo-section clearfix">
<div class="demo-section-title"></div>
<div class="inner-left preview">
<div class="data-container"></div>
</div>
<div class="inner-right code">
<pre><code>$('#demo').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 35],
pageSize: 5,
autoHidePrevious: true,
autoHideNext: true,
callback: function(data, pagination) {
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})</code></pre>
</div>
</div>
</script>
<script type="text/template" id="template-demo14">
<div class="demo-section clearfix">
<div class="demo-section-title"></div>
<div class="inner-left preview">
<div class="data-container"></div>
</div>
<div class="inner-right code">
<pre><code>$('#demo').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 50],
pageSize: 5,
pageRange: null,
showPageNumbers: true,
callback: function(data, pagination) {
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})</code></pre>
</div>
</div>
</script>
<script type="text/template" id="template-demo">
<div class="demo-section clearfix">
<div class="demo-section-title"></div>
<div class="inner-left preview">
<div class="data-container"></div>
</div>
<div class="inner-right code">
</div>
</div>
</script>
<script type="text/javascript" src="js/jquery-3.6.1.min.js"></script>
<script type="text/javascript" src="js/prettify.min.js"></script>
<script type="text/javascript" src="dist/2.6.0/pagination.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-58588801-1', 'auto');
ga('send', 'pageview');
</script>
</body></html>