jsort 页面无刷新排序

最新推荐文章于 2021-11-13 13:21:12 发布

Truman411

最新推荐文章于 2021-11-13 13:21:12 发布

阅读量881

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： class blogs jquery website image function

本文链接：https://blog.youkuaiyun.com/chumeng411/article/details/6681291

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用jquery的jsort插件在项目中实现表格列标题点击后进行无刷新排序的功能。通过导入jquery和jsort插件，并在HTML中设置表格结构和事件绑定，实现标题点击时数据的升序或降序排列。

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

最近项目中需要用到点击每列的标题根据当前列无刷新排序，所以就去网上找了下，最后决定使用 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>