CODEWITHSUNDEEP
jquery
j-p
j-p

Reputation: 3828

jQuery sort tables

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

Upvotes: 1

Views: 2058

Answers (3)

KristKing
KristKing

Reputation: 49

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;
        });

    });

Upvotes: 0

Ruslan
Ruslan

Reputation: 10147

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/

Upvotes: 1

Vincent Decaux
Vincent Decaux

Reputation: 10724

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

Upvotes: 0

Related Questions