jsort 页面无刷新排序

最近项目中需要用到点击每列的标题根据当前列无刷新排序,所以就去网上找了下,最后决定使用 jquery的 jsort插件,然后到官网上看了例子,在这里把我自己根据官网例子修改的代码放上来

首先需要导入两个JS库,注意顺序不要错了。

<script type="text/javascript" src="js/jquery-1.6.2.min.js" ></script>
<script type="text/javascript" src="js/jsort.0.3.min.js" ></script>

可以到 jquery 官网  上去下载

js代码部分如下:

$(function(){  	 
  		//获得所有标题,绑定toggle事件 每次点击在升序和降序中切换 		
  		$("#demo-tbl .order").toggle(
  			function(){
  				var name = $(this).attr("id");  //得到id 要和下面需要排序的列的 class属性对应					
			    $("#demo-tbl tbody.sort").jSort({
			        sort_by: 'td.'+name,
			        item: 'tr',
			        order: 'asc'
			    });
				
  			},
  			function(){
  				var name = $(this).attr("id");  						
			    $("#demo-tbl tbody.sort").jSort({
			        sort_by: 'td.'+name,
			        item: 'tr',
			        order: 'desc'
			    });
				
  			}
  		);  		  		
  		
  	});

html部分如下:

<h2 class="title">Sorting TABLE demo</h2>
  
    <table cellspacing="0" cellpadding="0" border="1" id="demo-tbl">
	    <tbody class="header">
	        <tr>
	            <th><span style="cursor: pointer" class="order" id="title">Title</span></th>
	            <th><span style="cursor: pointer" class="order" id="txt">Description</span></th>
	        </tr>
	    </tbody>
    
	    <tbody class="sort">
	        <tr>
	            <td class="title">jQuery content switcher</td>
	            <td class="txt">You can display images, pictures, news and videos with a featured slideshow. In the last few years image and content sliders become very popular and you can see them in thousand of blogs and websites. With sliding effects your website pages could have a truly unique and creative look. jQuery slideshow it is a great way to attract new visitors to your website.</td>
	        </tr>  
	        <tr>
	            <td class="title">Horizontal slider</td>
	            <td class="txt">With sliding effects your website pages could have a truly unique and creative look. jQuery slideshow it is a great way to attract new visitors to your website. In the last few years image and content sliders become very popular and you can see them in thousand of blogs and websites. You can display images, pictures, news and videos with a featured slideshow.</td>
	        </tr>
	        <tr>
	            <td class="title">Content slider</td>
	            <td class="txt">In the last few years image and content sliders become very popular and you can see them in thousand of blogs and websites. You can display images, pictures, news and videos with a featured slideshow. jQuery slideshow it is a great way to attract new visitors to your website. With sliding effects your website pages could have a truly unique and creative look.</td>
	        </tr>
	        
	        <tr>
	            <td class="title">jQuery slideshow</td>
	            <td class="txt">jQuery slideshow it is a great way to attract new visitors to your website. With sliding effects your website pages could have a truly unique and creative look. You can display images, pictures, news and videos with a featured slideshow. In the last few years image and content sliders become very popular and you can see them in thousand of blogs and websites.</td>
	        </tr>
	    </tbody>        
	</table>




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值