Simple pagination using http://flaviusmatis.github.io/simplePagination.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  
   <link rel="stylesheet" type="text/css" href="http://flaviusmatis.github.io/simplePagination.js/simplePagination.css" />  
   <script type="text/javascript" src="http://flaviusmatis.github.io/simplePagination.js/jquery.simplePagination.js"></script>  
   <script type="text/javascript" charset="utf-8">  
     $(document).ready(function () {  
       var itemsOnPage = 3;  
       $('#paging').pagination({  
         items: $('#content > div').length,  
         itemsOnPage: itemsOnPage,  
         cssStyle: 'light-theme',  
         onPageClick: function (pageNumber, event) {  
           var pageN = pageNumber != 0 ? (pageNumber - 1) : pageNumber;  
           var from = (pageN * itemsOnPage) + 1;  
           var to = (pageNumber * itemsOnPage);  
           console.log('page :'+pageNumber+' from: ' + from + ' to :' + to);  
           $('#content > div').css({ 'display': 'none' });  
           for (var i = from; i <= to ; i++) {  
             console.log('loop :'+i);  
             $('#content > div:eq(' + (i-1) + ')').css({ 'display': 'block' });  
           }  
         },  
         onInit: function () {  
           $('#content > div').css({ 'display': 'none' });  
           for (var i = 0; i <itemsOnPage; ++i) {  
             $('#content > div:eq('+i+')').css({ 'display': 'block' });  
           }  
         }  
       });  
     });  
   </script>  
  <div id="content" style="width:210px">  
     <div style="width:200px;height:20px;background-color:blueviolet;margin-bottom:5px">1</div>  
     <div style="width:200px;height:20px;background-color:blueviolet;margin-bottom:5px">2</div>  
     <div style="width:200px;height:20px;background-color:blueviolet;margin-bottom:5px">3</div>  
     <div style="width:200px;height:20px;background-color:blueviolet;margin-bottom:5px">4</div>  
     <div style="width:200px;height:20px;background-color:blueviolet;margin-bottom:5px">5</div>  
     <div style="width:200px;height:20px;background-color:blueviolet;margin-bottom:5px">6</div>  
     <div style="width:200px;height:20px;background-color:blueviolet;margin-bottom:5px">7</div>  
     <div style="width:200px;height:20px;background-color:blueviolet;margin-bottom:5px">8</div>  
     <div style="width:200px;height:20px;background-color:blueviolet;margin-bottom:5px">9</div>  
     <div style="width:200px;height:20px;background-color:blueviolet;margin-bottom:5px">10</div>  
     <div style="width:200px;height:20px;background-color:blueviolet;margin-bottom:5px">11</div>  
     <div style="width:200px;height:20px;background-color:blueviolet;margin-bottom:5px">12</div>  
     <div style="width:200px;height:20px;background-color:blueviolet;margin-bottom:5px">13</div>  
     <div style="width:200px;height:20px;background-color:blueviolet;margin-bottom:5px">14</div>  
     <div style="width:200px;height:20px;background-color:blueviolet;margin-bottom:5px">15</div>  
     <div style="width:200px;height:20px;background-color:blueviolet;margin-bottom:5px">16</div>  
     <div style="width:200px;height:20px;background-color:blueviolet;margin-bottom:5px">17</div>  
     <div style="width:200px;height:20px;background-color:blueviolet;margin-bottom:5px">18</div>  
     <div style="width:200px;height:20px;background-color:blueviolet;margin-bottom:5px">19</div>  
     <div style="width:200px;height:20px;background-color:blueviolet;margin-bottom:5px">20</div>  
     <div style="width:200px;height:20px;background-color:blueviolet;margin-bottom:5px">21</div>  
   </div>  
   <div id="paging" ></div>