Table pagination using HTML/CSS in Jquery/javascript

HTML:

<table width="100%" class="tbl table table-bordered table-striped" id="divdynamic">

</table>

Javascript:

We have to must add this libaray

http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js

(function($) {

    $(function() {

        $.widget("zpd.paging", {

            options: {

                limit: 5,

                rowDisplayStyle: 'block',

                activePage: 0,

                rows: []

            },

            _create: function() {

                var rows = $("tbody", this.element).children();

                this.options.rows = rows;

                this.options.rowDisplayStyle = rows.css('display');

                var nav = this._getNavBar();

                this.element.after(nav);

                this.showPage(0);

            },

            _getNavBar: function() {

                var rows = this.options.rows;

                var nav = $('<div>', {class: 'paging-nav'});

                for (var i = 0; i < Math.ceil(rows.length / this.options.limit); i++) {

                    this._on($('<a>', {

                        href: '#',

                        text: (i + 1),

                        "data-page": (i)

                    }).appendTo(nav),

                            {click: "pageClickHandler"});

                }

                //create previous link

                this._on($('<a>', {

                    href: '#',

                    text: '<<',

                    "data-direction": -1

                }).prependTo(nav),

                        {click: "pageStepHandler"});

                //create next link

                this._on($('<a>', {

                    href: '#',

                    text: '>>',

                    "data-direction": +1

                }).appendTo(nav),

                        {click: "pageStepHandler"});

                return nav;

            },

            showPage: function(pageNum) {

                var num = pageNum * 1; //it has to be numeric

                this.options.activePage = num;

                var rows = this.options.rows;

                var limit = this.options.limit;

                for (var i = 0; i < rows.length; i++) {

                    if (i >= limit * num && i < limit * (num + 1)) {

                        $(rows[i]).css('display', this.options.rowDisplayStyle);

                    } else {

                        $(rows[i]).css('display', 'none');

                    }

                }

            },

            pageClickHandler: function(event) {

                event.preventDefault();

                $(event.target).siblings().attr('class', "");

                $(event.target).attr('class', "selected-page");

                var pageNum = $(event.target).attr('data-page');

                this.showPage(pageNum);

            },

            pageStepHandler: function(event) {

                event.preventDefault();

                //get the direction and ensure it's numeric

                var dir = $(event.target).attr('data-direction') * 1;

                var pageNum = this.options.activePage + dir;

                //if we're in limit, trigger the requested pages link

                if (pageNum >= 0 && pageNum < this.options.rows.length) {

                    $("a[data-page=" + pageNum + "]", $(event.target).parent()).click();

                }

            }

        });

    });

})(jQuery);

CSS:

.paging-nav {

  text-align: right;

  padding-top: 2px;

}

.paging-nav a {

  margin: auto 1px;

  text-decoration: none;

  display: inline-block;

  padding: 1px 7px;

  background: #91b9e6;

  color: white;

  border-radius: 3px;

}

.paging-nav .selected-page {

  background: #187ed5;

  font-weight: bold;

}

.paging-nav,

#divdynamic {

  width: 400px;

  margin: 0 auto;

  font-family: Arial, sans-serif;

}

 

#table pagination