Sort html table according to list of checkboxes in table column

Question

In my html table there one column ("IsReserved") is list of Checkboxes some are checked and some not. When user click on IsReserved header than table is sorted by it. Means on first click in asc order and on second click desc order. I want this problem is done by usig javascript or jquery and if any other then please.

In short i want to sort table according checkboxes in "IsReserved" column Thanks.

function sortTable(f, n) {
        var rows = $('#tab tbody  tr').get();

        rows.sort(function (a, b) {

            var A = $(a).children('td').eq(n).text().toUpperCase();
            var B = $(b).children('td').eq(n).text().toUpperCase();
            $("input:checkbox").attr("id")
            parseInt($(a).data("sort"));

            if (A < B) {
                return -1 * f;
            }
            if (A > B) {
                return 1 * f;
            }
            return 0;
        });

        $.each(rows, function (index, row) {
            $('#tab').children('tbody').append(row);
        });
    }

    var f_sl = 1;
    var f_nm = 1;
    //sort table by name
    $("#name").click(function () {
        f_sl *= -1;
        var n = $(this).prevAll().length;
        sortTable(f_sl, n);

    });

    //sort table by code
    $("#code").click(function () {
        f_nm *= -1;
        var n = $(this).prevAll().length;
        sortTable(f_nm, n);
    });

    //sort table by category
    $("#category").click(function () {
        f_nm *= -1;
        var n = $(this).prevAll().length;
        sortTable(f_nm, n);
    });

    //sort table by saleprice
    $("#saleprice").click(function () {
        f_nm *= -1;
        var n = $(this).prevAll().length;
        sortTable(f_nm, n);
    });

    //sort table by lead time
    $("#leadtime").click(function () {
        f_nm *= -1;
        var n = $(this).prevAll().length;
        sortTable(f_nm, n);
    });

    //sort table by qty per unit
    $("#qtu").click(function () {
        f_nm *= -1;
        var n = $(this).prevAll().length;
        sortTable(f_nm, n);
    });

    //sort table by current stock
    $("#currentstock").click(function () {
        f_nm *= -1;
        var n = $(this).prevAll().length;
        sortTable(f_nm, n);
    });

    //sort table by record level
    $("#recordlevel").click(function () {
        f_nm *= -1;
        var n = $(this).prevAll().length;
        sortTable(f_nm, n);
    });

    //end of sort table

Abhitalks · Accepted Answer

I want to sort table according checkboxes

In order to do that, you need to compare the checked property of the input inside the columns.

In your rows.sort method use the comparer like this:

$rows.sort(function(a, b) {
    var value1= $(a).find('td').eq(idx).find("input")[0].checked,
        value2 = $(b).find('td').eq(idx).find("input")[0].checked;

    return (value1 > value2); 
}

Where idx is the index of the column of the header which is clicked.

Here is a complete working demo, with sorting on multiple columns (explanation in code comments)...

Snippet:

var $buttons = $('.sort'), $tab = $("#tab");

$buttons.click(function(e) {
    var self = this,
    	$rows = $tab.find("tbody > tr"),
        idx = $buttons.index(this);       // index of the header which is clicked
  
    $rows.sort(function(a, b) {
        var $obj1 = $(a).find('td').eq(idx),  // which cell column based on index
            $obj2 = $(b).find('td').eq(idx),  
            value1, value2;
        
        if ($obj1.text().length > 0) {           // if the cell contains text
            value1 = $obj1.text().toUpperCase(); // use the text value
            value2 = $obj2.text().toUpperCase();
        } else {                                 // if the cell does not contain text
            value1 = $obj1.find("input")[0].checked; // use the checked property..
            value2 = $obj2.find("input")[0].checked  // .. of the input
        }

        // check if ascending or not
        if ($(self).hasClass('asc')) return (value1 > value2); 
        else return (value1 < value2); 
        
    });
    
    $(this).toggleClass('asc'); // toggle class for next ascending-descending sort
  
    // perform physical reordering
    $.each($rows, function(index, row){
        $tab.append(row);
    });
    
});

table, th, td { border: 1px solid #ddd; border-collapse: collapse; }
th, td { padding: 4px; }



    
        
            IsReserved
            Caption
            Other
        
    
        One 1
        Two 2
        Three 3
        Four 4

Fiddle: http://jsfiddle.net/abhitalks/m6nn4ved/1/

Sort html table according to list of checkboxes in table column

Answers (2)

Related Questions