Sorting Table Colums with Javascript

Sorting Table Colums populated via json with Javascript and jQuery

Framework 1 :

Framework 2 :

+ Js file(s) :

+ Css file(s) :
	Apply

	Link :
Direct http link :
	Fork button :

Html code :
	Embed preview :
	Copy the following html code to your page to embed the preview, To include many previews on a single page, just repeat the first line. You can change the width, height and border color (bcolor).

<div class="refork-widget" code="0ec" style="width:100%;height:200px;" bcolor="#ccc"></div> <script type="text/javascript" src="//snippet.run/d/z.js"></script>

HTML

CSS

Javascript

var arr = [
    {
        fname: 'Fred',
        lname: 'Alexander',
        age: 19
    },
    {
        fname: 'Kraig',
        lname: 'Malao',
        age: 81
    },
    {
        fname: 'Salomon',
        lname: 'Kipppa',
        age: 38
    }
];

$(function() {
    $('#headings th').click(function() {
        var id = $(this).attr('id');
        var asc = (!$(this).attr('asc')); // switch the order, true if not set
        
        // set asc="asc" when sorted in ascending order
        $('#headings th').each(function() {
            $(this).removeAttr('asc');
        });
        if (asc) $(this).attr('asc', 'asc');
        
        sortResults(id, asc);
    });
        
    showResults();
});

function sortResults(prop, asc) {
    arr = arr.sort(function(a, b) {
        if (asc) return (a[prop] &gt; b[prop]);
        else return (b[prop] &gt; a[prop]);
    });
    showResults();
}

function showResults () {
    var html = '';
    for (var e in arr) {
        html += '&lt;tr&gt;'
            +'&lt;td&gt;'+arr[e].fname+'&lt;/td&gt;'
            +'&lt;td&gt;'+arr[e].lname+'&lt;/td&gt;'
            +'&lt;td&gt;'+arr[e].age+'&lt;/td&gt;'
        +'&lt;/tr&gt;';
    }
    $('#results').html(html);
}

Sorting Table Colums with Javascript

Link :

Fork button :

Embed preview :