radika godiyal

radika godiyal

  • 1.8k
  • 9
  • 3.8k

Html Table pagination

Mar 19 2015 6:23 AM
we all know that asp.net gridview control will be rendered as a html table. Now i want to implement the griview pagination using jquery. So i googled and found a solution. But i got an paging example for HTML table. So can any tell me how to implement same to my gridview control.
Link :- 
Html Table pagination

Code:

$(document).ready(function(){
            $('#data').after('<div id="nav"></div>');
            var rowsShown = 4;
            var rowsTotal = $('#data tbody tr').length;
            var numPages = rowsTotal/rowsShown;
            for(i = 0;i < numPages;i++) {
                var pageNum = i + 1;
                $('#nav').append('<a href="#" rel="'+i+'">'+pageNum+'</a> ');
            }
            $('#data tbody tr').hide();
            $('#data tbody tr').slice(0, rowsShown).show();
            $('#nav a:first').addClass('active');
            $('#nav a').bind('click', function(){
 
                $('#nav a').removeClass('active');
                $(this).addClass('active');
                var currPage = $(this).attr('rel');
                var startItem = currPage * rowsShown;
                var endItem = startItem + rowsShown;
                $('#data tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
                        css('display','table-row').animate({opacity:1}, 300);
            });
        });


Answers (2)