Pagination using Jquery in Gridview without prerender grid event.

As we all know pagination in Gridview with c# is a tedious and herculean task to work for Asp.net coders or programmers because it will call all the server side pagination events of a grid that makes the burden on website, using Jquery we can easily work using Jquery pagination will not make any costly calls to the database server. There are so many articles discuss in various websites but there is a draw back by using that code. Let us discuss how to overcome that in this article.

In General we use pagination of a grid view using Asp.net grid events but to do so there are so many events will fire on server side and we use stipulated pagination functionality of that gridview. But when we work with custom paging we need to write lot of code or lengthy code in Asp.net coding, but using Jquery code you will know how to paginate a grid without writing lengthy code.

There are so many websites which discuss the same in their articles how to paginate a gridview using Jquery but I found a different way of doing it using the same libraries with more effective way i.e. without using any server side events.

We all know Jquery pagination is a client side scripting therefore there is no need of interaction with database server. We heard about on demand - load concept Jquery pagination will exactly do this.

Let us have a snapshot what we are discussing here




Here in the dropdown list we have multiple's of 5 for pagination(5, 10, 25, 50, 100)...... this is Jquery code and you can find this in any website...

<script type="text/javascript">
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.tablePagination.0.1.js" type="text/javascript"></script>
    $(window).load(function () {
        $('#Main_ctl01_gridList').tablePagination();
    });
    (function ($) {
        $.fn.tablePagination = function (settings) {
            var defaults = {
                firstArrow: (new Image()).src = "../../../../Images/first.gif",
                prevArrow: (new Image()).src = "../../../../Images/prev.gif",
                lastArrow: (new Image()).src = "../../../../Images/last.gif",
                nextArrow: (new Image()).src = "../../../../Images/next.gif",
                rowsPerPage: 5,
                currPage: 1,
                optionsForRows: [5, 10, 25, 50, 100],
                ignoreRows: []
            };
            settings = $.extend(defaults, settings);
            var table = $(this)[0];
            if (table.rows.length > 0) {
                return this.each(function () {
                    var table = $(this)[0];
                    var totalPagesId = '#' + table.id + '+#tablePagination #tablePagination_totalPages';
                    var currPageId = '#' + table.id + '+#tablePagination #tablePagination_currPage';
                    var rowsPerPageId = '#' + table.id + '+#tablePagination #tablePagination_rowsPerPage';
                    var firstPageId = '#' + table.id + '+#tablePagination #tablePagination_firstPage';
                    var prevPageId = '#' + table.id + '+#tablePagination #tablePagination_prevPage';
                    var nextPageId = '#' + table.id + '+#tablePagination #tablePagination_nextPage';
                    var lastPageId = '#' + table.id + '+#tablePagination #tablePagination_lastPage';

                    var possibleTableRows = $.makeArray($('tbody tr', table));
                    var tableRows = $.grep(possibleTableRows, function (value, index) {
                        return ($.inArray(value, defaults.optionsForRows.copyWithin) == -1);
                    }, false)

                    var numRows = tableRows.length;
                    if (numRows > 0) {
                        var totalPages = resetTotalPages();
                        var currPageNumber = (defaults.currPage > totalPages) ? 1 : defaults.currPage;
                        if ($.inArray(defaults.rowsPerPage, defaults.optionsForRows) == -1)
                            defaults.optionsForRows.push(defaults.rowsPerPage);


                        function hideOtherPages(pageNum) {
                            if (pageNum == 0 || pageNum > totalPages)
                                return;
                            var startIndex = (pageNum - 1) * defaults.rowsPerPage;
                            var endIndex = (startIndex + defaults.rowsPerPage - 1);
                            $(tableRows).show();
                            for (var i = 1; i < tableRows.length; i++) {
                                if (i < startIndex || i > endIndex) {
                                    $(tableRows[i]).hide()
                                }
                            }
                        }

                        function resetTotalPages() {
                            var preTotalPages = Math.round(numRows / defaults.rowsPerPage);
                            var totalPages = (preTotalPages * defaults.rowsPerPage < numRows) ? preTotalPages + 1 : preTotalPages;
                            if ($(totalPagesId).length > 0)
                                $(totalPagesId).html(totalPages);
                            return totalPages;
                        }

                        function resetCurrentPage(currPageNum) {
                            if (currPageNum < 1 || currPageNum > totalPages)
                                return;
                            currPageNumber = currPageNum;
                            hideOtherPages(currPageNumber);
                            $(currPageId).val(currPageNumber)
                        }

                        function resetPerPageValues() {
                            var isRowsPerPageMatched = false;
                            var optsPerPage = defaults.optionsForRows;
                            optsPerPage.sort();
                            var perPageDropdown = $(rowsPerPageId)[0];
                            console.log(perPageDropdown.length)
                            perPageDropdown.length = 0;
                            for (var i = 0; i < optsPerPage.length; i++) {
                                if (optsPerPage[i] == defaults.rowsPerPage) {
                                    perPageDropdown.options[i] = new Option(optsPerPage[i], optsPerPage[i], true, true);
                                    isRowsPerPageMatched = true;
                                }
                                else {
                                    perPageDropdown.options[i] = new Option(optsPerPage[i], optsPerPage[i]);
                                }
                            }
                            if (!isRowsPerPageMatched) {
                                defaults.optionsForRows == optsPerPage[0];
                            }
                        }

                        if (numRows > 0) {
                            function createPaginationElements() {
                                var htmlBuffer = [];
                                htmlBuffer.push("
");
                                htmlBuffer.push("");
                                htmlBuffer.push(" Per Page  ");
                                htmlBuffer.push(" 5");
                                htmlBuffer.push("");
                                htmlBuffer.push("");
                                htmlBuffer.push("");
                                htmlBuffer.push("");
                                htmlBuffer.push("Page ");
                                htmlBuffer.push(" ");
                                htmlBuffer.push(" of  " + totalPages + "");
                                htmlBuffer.push("");
                                htmlBuffer.push("");
                                htmlBuffer.push("");
                                htmlBuffer.push("
");

                                return htmlBuffer.join("").toString();
                            }
                        }
                        if ($(totalPagesId).length == 0 && numRows > 5) {
                            $(this).after(createPaginationElements());

                        }
                        else {
                            $('#tablePagination_currPage').val(currPageNumber);
                        }
                        resetPerPageValues();
                        hideOtherPages(currPageNumber);

                        $(firstPageId).bind('click', function (e) {
                            resetCurrentPage(1)
                        });

                        $(prevPageId).bind('click', function (e) {
                            resetCurrentPage(currPageNumber - 1)
                        });
                        $(nextPageId).bind('click', function (e) {

                            resetCurrentPage(currPageNumber + 1)
                        });

                        $(lastPageId).bind('click', function (e) {

                            resetCurrentPage(totalPages)
                        });

                        $(currPageId).bind('change', function (e) {

                            resetCurrentPage(this.value)
                        });

                        $(rowsPerPageId).bind('change', function (e) {
                            defaults.rowsPerPage = parseInt(this.value, 10);
                            totalPages = resetTotalPages();

                            resetCurrentPage(1)
                        });
                    }
                })

            };
        }
    })(jQuery);

      var possibleTableRows = $.makeArray($('tbody tr', table));
                    var tableRows = $.grep(possibleTableRows, function (value, index) {
                        return ($.inArray(value, defaults.optionsForRows.copyWithin) == -1);
                    }, false)