jQuery排序表

Question

我在这篇文章（jQuery table sort）中取得了领先 - 试图做我正在做的事情......

代码在这里。 http://jsfiddle.net/daqGC/

这不起作用......任何想法

这是js代码。 HTML可以在jsFiddle上找到。

var user_table = $( '#users' );
$('#company_header, #user_header, #email_header, #type_header')
    .wrapInner('<span title="sort this column"/>')
    .each(function(){

        var th = $(this),
            thIndex = th.index(),
            inverse = false;

        th.click(function(){

            user_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(){

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

            });

            inverse = !inverse;

        });

    });

THx的

Answer 1

您遇到的问题是您收到了javascript错误：Uncaught TypeError: Object [object Object] has no method 'sortElements'

您需要包含外部库：https://github.com/padolsey/jQuery-Plugins/blob/master/sortElements/jquery.sortElements.js

因此，您需要做的就是下载.js文件并在您的页面after上引用jQuery脚本引用，例如：

<script type="text/javascript" src="https://raw.github.com/padolsey/jQuery-Plugins/master/sortElements/jquery.sortElements.js"></script>

在此处查看您的jsFiddle：http://jsfiddle.net/daqGC/3/

Answer 2

您必须加载插件SortElements才能使用此功能。这不是本机jQuery函数。 使用此插件：https://raw.github.com/padolsey/jQuery-Plugins/master/sortElements/jquery.sortElements.js

Answer 3

通过数字和字符串添加排序，除了使用jquery-ui之外，您还可以改进界面：

$('#cuerpoTabla thead tr th.string, #cuerpoTabla thead tr th.numerico')
    .wrapInner('<span title="Ordenar esta columna"/>')
    .each(function()
    {
        var th = $(this);
        //$('<i class="ui-icon ui-icon-caret-2-n-s"></i>').insertAfter(th);
        th.css("cursor","pointer");
        th.append('<i class="ui-icon ui-icon-caret-2-n-s"></i>');
        var thIndex = th.index();
        var inverse = false;
        th.click(function()
        {
            th.siblings().find("i.ui-icon").removeClass("ui-icon-caret-1-n").removeClass("ui-icon-caret-1-s").addClass("ui-icon-caret-2-n-s");
            th.find("i.ui-icon").removeClass("ui-icon-caret-2-n-s");
            if (inverse) {
                th.find("i.ui-icon").removeClass("ui-icon-caret-1-n");
                th.find("i.ui-icon").addClass("ui-icon-caret-1-s");
            }
            else
            {
                th.find("i.ui-icon").removeClass("ui-icon-caret-1-s");
                th.find("i.ui-icon").addClass("ui-icon-caret-1-n");
            }
            $("#cuerpoTabla").find('td').filter(function()
            {
                return $(this).index() === thIndex;

            }).sortElements(function(a, b)
            {
                if($.isNumeric($.text([a])))
                {
                    x = $.text([a]);
                    y = $.text([b]);
                    return (eval(x) > eval(y)) ?inverse ? -1 : 1: inverse ? 1 : -1;
                }else
                {
                    return $.text([a]) > $.text([b]) ?inverse ? -1 : 1: inverse ? 1 : -1;
                }

            }, function()
            {
                return this.parentNode; 
            });
            inverse = !inverse;
        });

    });

$('#cuerpoTabla thead tr th.string, #cuerpoTabla thead tr th.numerico') .wrapInner('<span title="Ordenar esta columna"/>') .each(function() { var th = $(this); //$('<i class="ui-icon ui-icon-caret-2-n-s"></i>').insertAfter(th); th.css("cursor","pointer"); th.append('<i class="ui-icon ui-icon-caret-2-n-s"></i>'); var thIndex = th.index(); var inverse = false; th.click(function() { th.siblings().find("i.ui-icon").removeClass("ui-icon-caret-1-n").removeClass("ui-icon-caret-1-s").addClass("ui-icon-caret-2-n-s"); th.find("i.ui-icon").removeClass("ui-icon-caret-2-n-s"); if (inverse) { th.find("i.ui-icon").removeClass("ui-icon-caret-1-n"); th.find("i.ui-icon").addClass("ui-icon-caret-1-s"); } else { th.find("i.ui-icon").removeClass("ui-icon-caret-1-s"); th.find("i.ui-icon").addClass("ui-icon-caret-1-n"); } $("#cuerpoTabla").find('td').filter(function() { return $(this).index() === thIndex; }).sortElements(function(a, b) { if($.isNumeric($.text([a]))) { x = $.text([a]); y = $.text([b]); return (eval(x) > eval(y)) ?inverse ? -1 : 1: inverse ? 1 : -1; }else { return $.text([a]) > $.text([b]) ?inverse ? -1 : 1: inverse ? 1 : -1; } }, function() { return this.parentNode; }); inverse = !inverse; }); });