Jquery - Table 排序

Jquery - Table 排序

剛好我需要做排序,然後,查一下,找到一個解法 jquery.sortElement.js的擴充js,

https://github.com/padolsey-archive/jquery.fn/blob/master/sortElements/jquery.sortElements.js

去載入該js後,

並撰寫以下

就可以不需做太多事,就能夠讓你現有的table能夠按欄位名稱做排序

我只額外多加了一行.css('cursor','pointer'), 並在table加了css class sort_table,就完成了

var table = $('table');

$('.sortable th')
    .css('cursor','pointer')
    .wrapInner('<span title="sort this column"/>')
    .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;

        });

    });

參考網址

https://stackoverflow.com/questions/3160277/jquery-table-sort