Monday, 18 May 2015

Sort Table by jquery

1.  Sort table first column by jQuery

Create a function sortTable. Pass table id & order

function sortTable(table, order) {
            var asc   = order === 'asc',
            tbody = table.find('tbody');

         tbody.find('tr').sort(function(a, b) {
        if (asc) {
            return $('td:first', a).text().localeCompare($('td:first', b).text());
        } else {
            return $('td:first', b).text().localeCompare($('td:first', a).text());
        }
    }).appendTo(tbody);
}

Call function when document loaded

jQuery(document).ready(function() {
sortTable($('#editable'),'asc');
});

2. Sort the select option without empty value
Html:
<select id="contacts" class="filteroption" name="data[Candidateprofile][company]">
<option value="">Contact</option>
<option value="1">John</option>
<option value="2">Joseph</option>
<option value="3">Charles</option>
<option value="4">Edward</option>
<option value="5">Kevin</option>
<option value="6">Donald</option>
<option value="7">Brian</option>
</select>

jQuery:
$("#contacts").append($("#contacts option:gt(0)").sort(function (a, b) {
return a.text == b.text ? 0 : a.text < b.text ? -1 : 1;
}));

3. Sort according to Case sensitivity

selectSort('#contacts', 'text', 'asc');
var selectSort = function (select, attr, order) {
    if(attr === 'text'){
        if(order === 'asc'){
            $(select).html($(select).children('option').sort(function (x, y) {
                return $(x).text().toUpperCase() < $(y).text().toUpperCase() ? -1 : 1;
            }));
            $(select).get(0).selectedIndex = 0;
            e.preventDefault();
        }
        if(order === 'desc'){
            $(select).html($(select).children('option').sort(function (y, x) {
                return $(x).text().toUpperCase() < $(y).text().toUpperCase() ? -1 : 1;
            }));
            $(select).get(0).selectedIndex = 0;
            e.preventDefault();
        }
    }
};

0 comments:

Post a Comment