jQuery排序表

我在这篇文章（）中起了带头作用-尝试做我正在做的事情

代码在这里。

它不起作用了。。。有什么想法吗

下面是js代码。HTML可以在JSFIDLE上找到

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;

        });

    });

var user_table=$（'#users'）；
$（“#公司#标题、#用户#标题、#电子邮件#标题、#键入#标题”）
.wrapInner（“”）
.each（函数（{
var th=$（此），
thIndex=th.index（），
逆=假；
点击（函数（）{
user_table.find（'td'）.filter（函数（）{
返回$（this）.index（）==thIndex；
}).分拣元件（功能（a、b）{
返回$.text（[a]）>$.text（[b]）？
相反？-1:1
：逆？1:-1；
}，函数（）{
//parentNode是我们要移动的元素
返回此.parentNode；
});
逆=！逆；
});
});

---

THx

您必须加载插件组件才能使用此功能。这不是本机jQuery函数。

---

使用此插件：

您必须加载插件组件才能使用此功能。这不是本机jQuery函数。

---

使用此插件：

您遇到的问题是javascript错误：

未捕获的TypeError:Object[Object Object]没有方法“sortElements”

您需要包括外部库：

因此，您只需下载.js文件并在页面上的jQuery脚本引用之后引用它，例如：

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

---

请参阅此处修复的JSFIDLE:

您遇到的问题是您遇到了一个javascript错误：

未捕获的类型错误：Object[Object Object]没有方法“sortElements”

您需要包括外部库：

因此，您只需下载.js文件并在页面上的jQuery脚本引用之后引用它，例如：

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

---

请参见此处修复的JSFIDLE:

添加按数字和字符串排序，除了使用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;
        });

    });

$（'#cuerpotablea thead tr th.string，#cuerpotablea thead tr th.numerico'）
.wrapInner（“”）
.each（函数（
{
var th=$（本）；
//$（''）。在（th）之后插入；
css（“光标”、“指针”）；
附加（“”）；
var thIndex=th.index（）；
var逆=假；
点击（函数（）
{
th.sibbins（）.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（逆）{
th.find（“i.ui-icon”）.removeClass（“ui-icon-caret-1-n”）；
th.find（“i.ui-icon”）.addClass（“ui-icon-caret-1-s”）；
}
其他的
{
th.find（“i.ui-icon”）.removeClass（“ui-icon-caret-1-s”）；
th.find（“i.ui-icon”）.addClass（“ui-icon-caret-1-n”）；
}
$（“#cuerpotablea”）.find（'td'）.filter（函数（）
{
返回$（this）.index（）==thIndex；
}).分拣元件（功能（a、b）
{
如果（$.isNumeric（$.text（[a]））
{
x=$.text（[a]）；
y=$.text（[b]）；
返回值（eval（x）>eval（y））？逆-1:1：逆-1:1；
}否则
{
返回$.text（[a]）>$.text（[b]）？逆-1:1:逆-1；
}
}，函数（）
{
返回此.parentNode；
});
逆=！逆；
});
});

添加按数字和字符串排序，除了使用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;
        });

    });

$（'#cuerpotablea thead tr th.string，#cuerpotablea thead tr th.numerico'）
.wrapInner（“”）
.each（函数（
{
var th=$（本）；
//$（''）。在（th）之后插入；
css（“光标”、“指针”）；
附加（“”）；
var thIndex=th.index（）；
var逆=假；
点击（函数（）
{
th.sibbins（）.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（逆）{
th.find（“i.ui-icon”）.removeClass（“ui-icon-caret-1-n”）；
th.find（“i.ui-icon”）.addClass（“ui-icon-caret-1-s”）；
}
其他的
{
th.find（“i.ui-icon”）.removeClass（“ui-icon-caret-1-s”）；
th.find（“i.ui-icon”）.addClass（“ui-icon-caret-1-n”）；
}
$（“#cuerpotablea”）.find（'td'）.filter（函数（）
{
返回$（this）.index（）==thIndex；
}).分拣元件（功能（a、b）
{
如果（$.isNumeric（$.text（[a]））
{
x=$.text（[a]）；
y=$.text（[b]）；
返回值（eval（x）>eval（y））？逆-1:1：逆-1:1；
}否则
{
返回$.text（[a]）>$.text（[b]）？逆-1:1:逆-1；
}
}，函数（）
{
返回此.parentNode；
});
逆=！逆；
});
});

没有外部LIB的firmiliar，我是否只是在jquery引用之后链接到它？或者我下载它并粘贴到我的jquery文件中？？不是带有外部libs的firmiliar，我只是在jquery引用之后链接到它吗？还是下载并粘贴到jquery文件中？？？？