使用jquery进行分页 [英] pagination using jquery

问题描述

我们都知道asp.net 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 =

（' < span class =code-string>＃data tbody tr'）。length;
var numPages = rowsTotal / rowsShown;
for （i = 0 ; i< numPages; i ++）{
var pageNum = i + 1 ;

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

这篇关于使用jquery进行分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！