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

最新推荐文章于 2024-05-02 17:42:37 发布

cheug

最新推荐文章于 2024-05-02 17:42:37 发布

阅读量482

点赞数

分类专栏： ASP.NET 文章标签： jquery border function table xhtml server

本文链接：https://blog.csdn.net/cheug/article/details/7777870

版权

ASP.NET 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

今天刚刚学习了实现不刷新分页功能用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>