<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({ counts : 37, callback: function (objpage) { console.log(objpage); get_ajx_regord(objpage.pageno,objpage.limit); } }); }); function get_ajx_regord(page,limit){ console.log(page+" "+limit); } </script>

.jPager{ margin:20px;}

/*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); }; _this.setInputval = function(pageno,totalpages){ //console.log("setInputval"); pagenum.val("Page "+pageno+" of "+totalpages); }; _this.page = function(){ //console.log(settings.pagin.current_page +" :: "+settings.pagin.max_pages); pagenum.val("Page "+settings.pagin.current_page+" of "+settings.pagin.max_pages); settings.callback({"pageno":settings.pagin.current_page,"pagesize":pagesize.val()}); }; _this.disable_action = function(el){ el.addClass('disabled'); }; _this.enable_action = function(el){ el.removeClass('disabled'); }; _this.setAction = function(){ if( settings.pagin.max_pages == settings.pagin.current_page ){ _this.disable_action(next); _this.disable_action(last); _this.enable_action(first); _this.enable_action(previous); } else if( settings.pagin.current_page == 1 ){ _this.disable_action(first); _this.disable_action(previous); _this.enable_action(next); _this.enable_action(last); } else{ _this.enable_action(next); _this.enable_action(last); _this.enable_action(first); _this.enable_action(previous); } }; _this.firstClicked = function(){ settings.pagin.current_page =1; _this.setAction(); _this.page(); }; _this.nextClicked = function(){ settings.pagin.current_page = settings.pagin.current_page+1; _this.setAction(); _this.page(); }; _this.previousClicked = function(){ if(settings.pagin.current_page > 1){ settings.pagin.current_page = settings.pagin.current_page-1; } _this.setAction(); _this.page(); }; _this.lastClicked = function(){ settings.pagin.current_page = settings.pagin.max_pages; _this.setAction(); _this.page(); }; _this.pagenumChanged = function(){ console.log("pagenumChanged"); _this.page(); }; _this.pagesizeChanged = function(){ var max_pages = Math.ceil(settings.counts / pagesize.val()); settings.pagin.max_pages = max_pages; settings.pagin.current_page = 1 _this.setInputval(1,max_pages); _this.enable_action(next); _this.enable_action(last); _this.enable_action(first); _this.enable_action(previous); _this.page(); }; _this.init(); }; }( jQuery ));