首页   技术笔记   网址导航   Json在线解析   二维码   Ip地址查询   在线流程图  
新用户注册 | 会员登录
当前位置:  开发笔记 > 编程语言 > 正文

jQuery表排序

作者：地之南_816 | 2023-07-06 13:06
如何解决《jQuery表排序》经验，为你挑选了7个好方法。

我有一个非常简单的HTML表,有4列: 

Facility Name, Phone #, City, Specialty

我希望用户能够按设施名称和仅城市进行排序.

我如何使用jQuery编写代码？



1> Nick Grealy..：

我偶然发现了这一点,并认为我会投入2美分.单击列标题以升序排序,再次单击降序排序.

适用于Chrome,Firefox,Opera和IE(8)

只使用JQuery

alpha和数字排序 - 升序和降序

$('th').click(function(){
    var table = $(this).parents('table').eq(0)
    var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
    this.asc = !this.asc
    if (!this.asc){rows = rows.reverse()}
    for (var i = 0; i < rows.length; i++){table.append(rows[i])}
})
function comparer(index) {
    return function(a, b) {
        var valA = getCellValue(a, index), valB = getCellValue(b, index)
        return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
    }
}
function getCellValue(row, index){ return $(row).children('td').eq(index).text() }
table, th, td {
    border: 1px solid black;
}
th {
    cursor: pointer;
}



    
CountryDateSize

    
France2001-01-0125

    
spain2005-05-05

    
Lebanon2002-02-02-17

    
Argentina2005-04-04100

    
USA-6


2> James..：

如果你想避免所有的花里胡哨,那么我可以建议这个简单的sortElements插件.用法:

var table = $('table');

$('.sortable th')
    .wrapInner('')
    .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){

                if( $.text([a]) == $.text([b]) )
                    return 0;

                return $.text([a]) > $.text([b]) ?
                    inverse ? -1 : 1
                    : inverse ? 1 : -1;

            }, function(){

                // parentNode is the element we want to move
                return this.parentNode; 

            });

            inverse = !inverse;

        });

    });

还有一个演示.(单击"city"和"facility"列标题进行排序)

该演示被破坏,因为插件的位置已经改变.我已经分了一个[固定jsfiddle到demo sortElements](http://jsfiddle.net/gFzCk/),这至少似乎对我有用:) @ 999也许你可以更新你的答案链接到固定演示？
如果页面上有多个表怎么办？我分叉了jsfiddle http://jsfiddle.net/CM8bT/

3> bpeterson76..：

到目前为止,我使用的最简单的是:http: //datatables.net/

非常简单......只要确保你去DOM替换路线(IE,构建一个表并让DataTables重新格式化它),然后确保使用和/ 或它将无法正常工作.这是唯一的问题.

还有对AJAX等的支持.与所有非常好的代码片段一样,它也非常容易完全关闭.不过,你会对你可能会使用的东西感到惊讶.我开始使用"裸"DataTable,它只对一个字段进行了排序,然后意识到某些功能与我正在做的事情非常相关.客户喜欢新功能.

奖励指向DataTables以获得完整的ThemeRoller支持....

我也对乒乓球运动员运气不错,但它并不是那么容易,也没有很好的记录,并且只有很好的功能.

同意它是一个很好的功能丰富的插件,但可能在OP的要求的复杂性和大小方面有点过分.
在NuGet上可以获得+1:http://nuget.org/List/Packages/jquery.datatables
我知道这是一个老线程,但这个答案仍然适用.可能是我用过的最简单的插件.花了5分钟来完成并整理我的桌子.谢谢!

4> Ravi Ram..：

我们刚开始使用这个光滑的工具:https: //plugins.jquery.com/tablesorter/

有一个视频用于:http: //www.highoncoding.com/Articles/695_Sorting_GridView_Using_JQuery_TableSorter_Plug_in.aspx

    $('#tableRoster').tablesorter({
        headers: {
            0: { sorter: false },
            4: { sorter: false }
        }
    });

有一个简单的表



5> cartbeforeho..：
我的回答是"小心".许多jQuery表排序附加组件只对您传递给浏览器的内容进行排序.在许多情况下,您必须记住表是动态数据集,并且可能包含数以万计的数据行.
你确实提到你只有4列,但更重要的是,你没有提到我们在这里谈论了多少行.
如果从数据库向浏览器传递5000行,知道实际的数据库表包含100,000行,我的问题是:使表可排序的重点是什么？为了进行正确的排序,您必须将查询发送回数据库,并让数据库(实际设计用于排序数据的工具)为您进行排序.
直接回答你的问题,我遇到的最好的排序插件是Ingrid.有很多原因让我不喜欢这个附加组件("不必要的花里胡哨......"就像你所说的那样),但它在排序方面最好的一个特点就是它使用了ajax,并且没有假设您在排序之前已经将所有数据传递给它.
我认识到这个答案对于你的要求来说可能是过度杀戮(并且迟了2年),但是当我的领域的开发人员忽略了这一点时,我确实感到恼火.所以我希望别人能够接受它.
我现在感觉好多了.


6> 小智..：
我喜欢这个接受的答案,但是,你很少得到排序html的要求而不必添加指示排序方向的图标.我接受了接受答案的用法示例并通过简单地向我的项目添加bootstrap并添加以下代码来快速修复:
在每个内部,

         
                  

                    
                    User
                    Verified
                    Recently Accessed
                     
                  

        

        










        




以便您有一个设置图标的地方.



setIcon(this, inverse);



从接受的答案的用法,在线下:



th.click(function () {



并通过添加setIcon方法:



function setIcon(element, inverse) {

        var iconSpan = $(element).find('div');

        if (inverse == false) {
            $(iconSpan).removeClass();
            $(iconSpan).addClass('icon-white icon-arrow-up');
        } else {
            $(iconSpan).removeClass();
            $(iconSpan).addClass('icon-white icon-arrow-down');
        }
        $(element).siblings().find('div').removeClass();
    }




这是一个演示. - 您需要在Firefox或IE中运行演示,或禁用Chrome的MIME类型检查以使演示工作.它取决于sortElements插件,由接受的答案链接,作为外部资源.只是一个抬头!

        

7> Julian..：
这是对表进行排序的一种好方法： 







$(document).ready(function () {
                $('th').each(function (col) {
                    $(this).hover(
                            function () {
                                $(this).addClass('focus');
                            },
                            function () {
                                $(this).removeClass('focus');
                            }
                    );
                    $(this).click(function () {
                        if ($(this).is('.asc')) {
                            $(this).removeClass('asc');
                            $(this).addClass('desc selected');
                            sortOrder = -1;
                        } else {
                            $(this).addClass('asc selected');
                            $(this).removeClass('desc');
                            sortOrder = 1;
                        }
                        $(this).siblings().removeClass('asc selected');
                        $(this).siblings().removeClass('desc selected');
                        var arrData = $('table').find('tbody >tr:has(td)').get();
                        arrData.sort(function (a, b) {
                            var val1 = $(a).children('td').eq(col).text().toUpperCase();
                            var val2 = $(b).children('td').eq(col).text().toUpperCase();
                            if ($.isNumeric(val1) && $.isNumeric(val2))
                                return sortOrder == 1 ? val1 - val2 : val2 - val1;
                            else
                                return (val1 < val2) ? -sortOrder : (val1 > val2) ? sortOrder : 0;
                        });
                        $.each(arrData, function (index, row) {
                            $('tbody').append(row);
                        });
                    });
                });
            });


            table, th, td {
            border: 1px solid black;
        }
        th {
            cursor: pointer;
        }





        
idnameage

        
1Julian31

        
2Bert12

        
3Xavier25

        
4Mindy32

        
5David40

    

    

    


    


    

        
推荐阅读

        

            
        

    


    























    


    

        

            
            

                
                    devbox
                
            


            

                地之南_816            


            

                这个屌丝很懒，什么也没留下！            

            
            


                                
                    
                    关注作者
                            


        

    



    

        
Tags | 热门标签

        

            
        

    



    

        
RankList | 热门文章

        

            
        

    




    








    DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6 

    Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved  devBox.cn 开发工具箱  版权所有