https://pagination.js.org/

ID scansione:
ec62914d-4a86-4ac8-a9c3-eb72d634cff1Fatto
URL inviato:
https://pagination.js.org/
Report terminato:

I link in uscita identificati dalla pagina

LinkTesto
https://github.com/superRaytin/paginationjsFork 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

Variabili JavaScript · 18 trovate

Le variabili JavaScript globali caricate sull'oggetto finestra di una pagina sono variabili dichiarate all'esterno delle funzioni e accessibili da qualsiasi punto del codice nell'ambito corrente

NomeTipo
onbeforetoggleobject
documentPictureInPictureobject
onscrollendobject
$function
jQueryfunction
qobject
PR_SHOULD_USE_CONTINUATIONboolean
prettyPrintOnefunction
prettyPrintfunction
PRobject

Messaggi di log della console · 15 trovati

Messaggi registrati nella console Web

TipoCategoriaLog
logjavascript
URL
https://pagination.js.org/js/index.js
Testo
1 Normal JSHandle@array JSHandle@object
logjavascript
URL
https://pagination.js.org/js/index.js
Testo
7 Only page numbers JSHandle@array JSHandle@object
logjavascript
URL
https://pagination.js.org/js/index.js
Testo
20 Show page size changer JSHandle@array JSHandle@object
logjavascript
URL
https://pagination.js.org/js/index.js
Testo
8 Show "go" input & button JSHandle@array JSHandle@object
logjavascript
URL
https://pagination.js.org/js/index.js
Testo
12 Auto hide previous & next button JSHandle@array JSHandle@object
logjavascript
URL
https://pagination.js.org/js/index.js
Testo
5 Mini JSHandle@array JSHandle@object
logjavascript
URL
https://pagination.js.org/js/index.js
Testo
14 Show all pages JSHandle@array JSHandle@object
logjavascript
URL
https://pagination.js.org/js/index.js
Testo
2 Specify default JSHandle@array JSHandle@object
logjavascript
URL
https://pagination.js.org/js/index.js
Testo
6 Format result data JSHandle@array JSHandle@object
logjavascript
URL
https://pagination.js.org/js/index.js
Testo
4 Format navigator JSHandle@array JSHandle@object
logjavascript
URL
https://pagination.js.org/js/index.js
Testo
10 Format "go" input JSHandle@array JSHandle@object
logjavascript
URL
https://pagination.js.org/js/index.js
Testo
11 Methods & Events JSHandle@array JSHandle@object
logjavascript
URL
https://pagination.js.org/js/index.js
Testo
3 Asynchronous or JSONP JSHandle@array JSHandle@object
logjavascript
URL
https://pagination.js.org/js/index.js
Testo
13 Asynchronous & Dynamic total number JSHandle@array JSHandle@object
errornetwork
URL
https://pagination.js.org/favicon.ico
Testo
Failed to load resource: the server responded with a status of 404 ()

HTML

Il corpo HTML non elaborato della pagina

<!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&amp;cx=c&amp;_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 &amp; 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 &amp; 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&amp;tagmode=any&amp;format=json&amp;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 &amp; 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&amp;tagmode=any&amp;format=json&amp;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">&lt;</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">&lt;</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">'&lt;%= rangeStart %&gt;-&lt;%= rangeEnd %&gt; of &lt;%= totalNumber %&gt; 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 &lt;%= input %&gt; 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 &amp; 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>