js实现table排序(jQuery下的jquery.sortElements)

2020-11-26 17:08

阅读:897

标签:jquery   table排序   

项目中要实现table排序的功能。

网上有很多解决方案,很多都基于jQuery。

  • jquery.tablesorter,大小17KB,不过他的首页在ie10下兼容性有点问题。
  • DataTables,大小75KB,功能强大,带分页,搜索等功能。
  • 还有插件叫sortElements,很小巧,只有3KB,兼容性也不错,而且在Github上有818个星。

最后我选择用sortElements,实现很简单:

1. 引入jQuery


2. 引入sortElements.js


3. js 代码

    
$(document).ready(function(){  
       var table = $(‘#mytable‘);//table的id
       $(‘#sort_header‘)//要排序的headerid
        .each(function(){
            var th = $(this),
                thIndex = th.index(),
                inverse = false;
            
            th.click(function(){
                table.find(‘td‘).filter(function(){
                    return $(this).index() === thIndex;
                }).sortElements(function(a, b){
                    return $.text([a]) > $.text([b]) ?
                        inverse ? -1 : 1
                        : inverse ? 1 : -1;
                }, function(){
                    return this.parentNode; 
                });
                inverse = !inverse;

            });
        });
});


4. html代码



...
Facility name Phone # City Speciality
CCC 00001111 Amsterdam GGG


实现效果:www.bishouyi.cn

(由padolsey开发,github地址为https://github.com/padolsey/jquery.fn/tree/master/sortElements)

参考:http://stackoverflow.com/questions/3160277/jquery-table-sort


js实现table排序(jQuery下的jquery.sortElements),搜素材,soscw.com

js实现table排序(jQuery下的jquery.sortElements)

标签:jquery   table排序   

原文地址:http://blog.csdn.net/newand/article/details/24936123


评论


亲,登录后才可以留言!