jQuery sort tables

Question

I took a lead form this post ( jQuery table sort ) - in trying to do what Im doing...

the code is here. http://jsfiddle.net/daqGC/

It's not working... any thoughts

Here's the js code. the HTML can be found on 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

Ruslan · Accepted Answer · 2013-02-19 11:26:46Z

1

The problem you have is you're getting a javascript error: Uncaught TypeError: Object [object Object] has no method 'sortElements'

You need to include external library: https://github.com/padolsey/jQuery-Plugins/blob/master/sortElements/jquery.sortElements.js

So, all you need to do is, download the .js file and reference it on your page after the jQuery script reference, e.g.:

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

See your jsFiddle fixed here: http://jsfiddle.net/daqGC/3/

edited Feb 19, 2013 at 11:26

answered Feb 19, 2013 at 9:09

Ruslan

10.2k15 gold badges59 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

j-p Over a year ago

not firmiliar wiht external libs, do I just link to it after the jquery reference? or do I download it and paste it into my jquery file????

Vincent Decaux · Accepted Answer · 2013-02-19 09:07:55Z

0

You have to load the plugin SortElements to use this function. This is not a native jQuery function. Use this plugin : https://raw.github.com/padolsey/jQuery-Plugins/master/sortElements/jquery.sortElements.js

answered Feb 19, 2013 at 9:07

Vincent Decaux

10.9k7 gold badges67 silver badges103 bronze badges

Comments

KristKing · Accepted Answer · 2017-05-15 22:48:53Z

Adding the ordering by numbers and string, besides using jquery-ui you can improve the interface:



$('#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;
        });

    });

Collectives™ on Stack Overflow

jQuery sort tables

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related