最近项目中需要用到点击每列的标题根据当前列无刷新排序,所以就去网上找了下,最后决定使用 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>
jsort 页面无刷新排序
最新推荐文章于 2017-03-17 17:30:14 发布