使用jquery进行分页

本文介绍了使用jquery进行分页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我们都知道asp gridview控件将呈现为html表。现在我想使用jquery实现griview分页。所以我用Google搜索并找到了解决方案。但我得到了HTML表的分页示例。那么可以告诉我如何对我的gridview控件实现相同的功能。 链接： - 使用jquery分页 代码： -

$（ 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（' 点击， 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 ）; }）; }）;

解决方案

（ 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 ;

we all know that asp 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 :-pagination using jquery 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); }); });

解决方案

(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;