How to add proper pagination to dynamically created HTML table without using any plugin

Question

I have used solution given on below Stack - link, used solution for pagination

but here I am getting pagination as pic attached here with,getting pagination sample grid

I need pagination as follows, required pagination sample grid

if required I will share code.

Answer 1

You can refer the following sample:

<div class="container">
    <div class="row">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Table heading</th>
                        <th>Table heading</th>

                    </tr>
                </thead>
                <tbody id="myTable">
                    @for (var i = 1; i < 60; i++)
                    {
                        <tr>
                            <td>@i.ToString()</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
        <div class="col-md-12 text-center">
            <ul class="pagination pagination-lg pager" id="myPager"></ul>
        </div>
    </div>
</div>

JS Scripts:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script>
    $.fn.pageMe = function (opts) {
        var $this = this,
            defaults = {
                perPage: 7,
                showPrevNext: false,
                hidePageNumbers: false
            },
            settings = $.extend(defaults, opts);

        var listElement = $this;
        var perPage = settings.perPage;
        var children = listElement.children();
        var pager = $('.pager');

        if (typeof settings.childSelector != "undefined") {
            children = listElement.find(settings.childSelector);
        }

        if (typeof settings.pagerSelector != "undefined") {
            pager = $(settings.pagerSelector);
        }

        var numItems = children.size();
        var numPages = Math.ceil(numItems / perPage);

        pager.data("curr", 0);

        if (settings.showPrevNext) {
            $('<li><a href="#" class="prev_link">«</a></li>').appendTo(pager);
        }

        var curr = 0;
        // Added class and id in li start
        while (numPages > curr && (settings.hidePageNumbers == false)) {
            $('<li id="pg' + (curr + 1) + '" class="pg"><a href="#" class="page_link">' + (curr + 1) + '</a></li>').appendTo(pager);
            curr++;
        }
        // Added class and id in li end

        if (settings.showPrevNext) {
            $('<li><a href="#" class="next_link">»</a></li>').appendTo(pager);
        }

        pager.find('.page_link:first').addClass('active');
        pager.find('.prev_link').hide();
        if (numPages <= 1) {
            pager.find('.next_link').hide();
        }
        pager.children().eq(1).addClass("active");

        children.hide();
        children.slice(0, perPage).show();
        if (numPages > 3) {
            $('.pg').hide();
            $('#pg1,#pg2,#pg3').show();
            $("#pg3").after($("<li class='ell'>").html("<span>...</span>"));
        }

        pager.find('li .page_link').click(function () {
            var clickedPage = $(this).html().valueOf() - 1;
            goTo(clickedPage, perPage);
            return false;
        });
        pager.find('li .prev_link').click(function () {
            previous();
            return false;
        });
        pager.find('li .next_link').click(function () {
            next();
            return false;
        });

        function previous() {
            var goToPage = parseInt(pager.data("curr")) - 1;
            goTo(goToPage);
        }

        function next() {
            goToPage = parseInt(pager.data("curr")) + 1;
            goTo(goToPage);
        }

        function goTo(page) {
            var startAt = page * perPage,
                endOn = startAt + perPage;

            // Added few lines from here start

            $('.pg').hide();
            $(".ell").remove();
            var prevpg = $("#pg" + page).show();
            var currpg = $("#pg" + (page + 1)).show();
            var nextpg = $("#pg" + (page + 2)).show();
            if (prevpg.length == 0) nextpg = $("#pg" + (page + 3)).show();
            if (prevpg.length == 1 && nextpg.length == 0) {
                prevpg = $("#pg" + (page - 1)).show();
            }
            $("#pg1").show()
            if (curr > 3) {
                if (page > 1) prevpg.before($("<li class='ell'>").html("<span>...</span>"));
                if (page < curr - 2) nextpg.after($("<li class='ell'>").html("<span>...</span>"));
            }

            if (page <= numPages - 3) {
                $("#pg" + numPages.toString()).show();
            }
            currpg.addClass("active").siblings().removeClass("active");
            // Added few lines till here end


            children.css('display', 'none').slice(startAt, endOn).show();

            if (page >= 1) {
                pager.find('.prev_link').show();
            } else {
                pager.find('.prev_link').hide();
            }

            if (page < (numPages - 1)) {
                pager.find('.next_link').show();
            } else {
                pager.find('.next_link').hide();
            }

            pager.data("curr", page);
            /*pager.children().removeClass("active");
            pager.children().eq(page + 1).addClass("active");*/

        }
    };

    $(document).ready(function () {

        $('#myTable').pageMe({
            pagerSelector: '#myPager',
            showPrevNext: true,
            hidePageNumbers: false,
            perPage: 5
        });

    });
</script>

The result as below: