JQuery学习笔记20120724--实现无刷新分页功能

最新推荐文章于 2024-05-15 22:45:03 发布

原创最新推荐文章于 2024-05-15 22:45:03 发布 · 514 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #border #function #table #xhtml #server

ASP.NET 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种利用JQuery实现网页无刷新分页的方法。通过将页面内容进行切分并结合JQuery的DOM操作及事件绑定，使得用户在浏览时能够平滑地进行页面切换而无需重新加载整个页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天刚刚学习了实现不刷新分页功能用Jquery，把代码写下来免得以后忘记了。

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="example_6.aspx.vb" Inherits="WebJQuery_example_6" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    
    <style>
     body{font-family:arial;font-size:12px;}
     .selected {background:blue;font-weight:bold;font-size:14px;}
     .special {background:#6AAF18;text-align:center;font-size:22px;color:#fff;font-weight:bold;}
     th{background:#85B70C;}
     table, #data {border:1px solid #999;width:500px;}
     tr td, tr th, #data tr td {padding:5px;}
     tr td {border:1px solid #dedede;}
     #nav {margin:10px 0;}
     #nav a {text-decoration:none;color:#1759A3;padding:3px;}
     .active {background:#1759A3;color:#fff !important;font-weight:bold;}
  </style>
    
    
    
    
     <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
     <script>
     $(document).ready(function(){
       $('tbody tr:even').css('background','#dedede');
       $('tbody tr:odd').css('background','#ffffff');
       });
     </script>
     
     <script type="text/javascript">
     $(document).ready(function(){
	
    	$('#data').after('<div id="nav"></div>');
	
    	var rowsShown = 2;
	    var rowsTotal = $('table tr').length;
	    var numPages = Math.round(rowsTotal/rowsShown);

	    for(i = 0;i<numPages;i++) {
	    	var pageNum = i + 1;
		   $('#nav').append('<a href="#" rel="'+i+'">'+pageNum+'</a> ');
	       }
	
	     $('#data tr').hide();
         $('#data tr:first').show();
        
         $('#data 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;
    	      //console.log(endItem);	
    	 $('#data tr').css('opacity','0.0').hide().slice(startItem, endItem).css('display','table-row').animate({opacity:1}, 300, function (){
    	
        });

       });
	
	 });
     </script>
     
    
     
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table border="1" cellpadding="4" >
    		<tr>
    		<th style="width: 41px; height: 33px">Item #</th>
			<th style="width: 187px; height: 33px">Category</th>
			<th style="width: 91px; height: 33px">Product</th>
			<th style="height: 33px">Price</th>
			
		</tr>
	</table>
    <table border="1" cellpadding="4" id="data">
      
      <tbody>
      <tr>
        <td style="width: 43px">1</td>
        <td>North Face Jacket</td>
        <td>$189.99</td>
        <td>In_stock</td>
            
      </tr>
       <tr>
        <td style="width: 43px">2</td>           
        <td> Nike</td>          
        <td> $59.99</td>          
        <td> In-stock</td>        
      </tr>
       <tr>
        <td style="width: 43px">3</td>          
        <td>LED TV</td>          
        <td>$589.99</td>      
        <td>Out of stock</td>          
      </tr>
       <tr>
        <td style="width: 43px">4</td>           
        <td>Ping Golf Clubs</td>          
        <td> $159.99</td>         
        <td> In-stock</td>         
      </tr>
         
      </tbody>
    
    </table>
    
    
    
      </div>
    </form>
</body>
</html>