Bootstrap Snippet Pagination using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
        <div class="row  jPager"> 
                                    
                                        
                                        <div class="input-group  col-lg-3  col-md-3  col-sm-3 col-xs-12 pull-left">
                                                    <select class="form-control" data-pager-action='pagesize'>
                                                    <option value="5">Records Per Page 5</option>
                                                            <option value="10">Records Per Page 10</option>
                                                            <option value="15">Records Per Page 15</option>
                                                            <option value="20">Records Per Page 20</option>
                                                            <option value="25">Records Per Page 25</option>
                                                            <option value="50">Records Per Page 50</option>
                                                            <option value="100">Records Per Page 100</option>
                                                </select>
                                        </div>
                                        
                                        <div class="input-group   col-lg-6  col-md-6  col-sm-6 col-xs-12"> 
                                        <span class="input-group-addon btn btn-primary" data-pager-action='first'><i class="fa fa-angle-left"></i> First</span>
                                        <span class="input-group-addon btn btn-primary" data-pager-action='previous'><i class="fa fa-angle-double-left"></i> Previous</span>
                                            <input type="text" class="form-control" data-pager-action='pagenum'>
                                            <span class="input-group-addon btn btn-primary" data-pager-action='next'><i class="fa  fa-angle-double-right"></i> Next</span>
                                            <span class="input-group-addon btn btn-primary" data-pager-action='last'><i class="fa  fa-angle-right"></i> Last</span>
                                        </div>
                                        
                                        
                        </div>
</div>
<script>
$(document).ready(function(){
$('.jPager').jPager({
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
.jPager{ margin:20px;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*Plugin Name : jPager
Description : jQuery + Bootstrap Pagination Full Functioning Plugin
Date : 2015-11-21 
Email : jimmyrana.tech@gmail.com
*/
(function( $ ) {
 
$.fn.jPager =  function (options) {
    
        var defaults = { counts: 1,pagin : {} ,callback: function(page) {}};
        
        var settings = $.extend( {}, defaults, options );
        
        //console.log(settings);
  
        var _this = this;
        var first       = _this.find('span[data-pager-action="first"]');
        var next        = _this.find('span[data-pager-action="next"]');
        var previous    = _this.find('span[data-pager-action="previous"]');
        var last        = _this.find('span[data-pager-action="last"]');
        var pagenum     = _this.find('input[data-pager-action="pagenum"]');
        var pagesize    = _this.find('select[data-pager-action="pagesize"]');
        
        _this.init = function () {
                    first.on( "click", _this.firstClicked );
                    next.on( "click", _this.nextClicked );
                    previous.on( "click", _this.previousClicked );
                    last.on( "click", _this.lastClicked );
                    pagenum.on( "change", _this.pagenumChanged );
                    pagesize.on( "change", _this.pagesizeChanged );
                    var max_pages = Math.ceil(settings.counts / pagesize.val());
                    settings.pagin.max_pages            = max_pages;
                    settings.pagin.counts       = settings.counts;
                    settings.pagin.pagesize = pagesize.val();
                    settings.pagin.current_page = 1;
                    _this.setInputval(1,max_pages);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Pagination"
Bootstrap 3.3.0 Snippet by jimmyrana

Related: See More

Questions / Comments:

"Pagination" Bootstrap 3.3.0 Snippet by jimmyrana

Related: See More

Questions / Comments:

"Pagination"
Bootstrap 3.3.0 Snippet by jimmyrana