Filter and short table in asp.net c#

Fiter and Sortable in asp.net c#

<div id="search">
    <label for="filter">Filter :</label>
    <input id="filter" name="filter" placeholder="Search" type="text" value="" />
</div>

Download

$(document).ready(function () {
    zebraRows('tr:odd td', 'odd');

    $('tbody tr').hover(function () {
        $(this).find('td').addClass('hovered');
    }, function () {
        $(this).find('td').removeClass('hovered');
    });

    //default each row to visible
    $('tbody tr').addClass('visible');

    //overrides CSS display:none property
    //so only users w/ JS will see the
    //filter box
    $('#search').show();

    $('#filter').keyup(function (event) {
        //if esc is pressed or nothing is entered
        if (event.keyCode == 27 || $(this).val() == '') {
            //if esc is pressed we want to clear the value of search box
            $(this).val('');

            //we want each row to be visible because if nothing
            //is entered then all rows are matched.
            $('tbody tr').removeClass('visible').show().addClass('visible');
        }

        //if there is text, lets filter
        else {
            filter('tbody tr', $(this).val());
        }

        //reapply zebra rows
        $('.visible td').removeClass('odd');
        zebraRows('.visible:even td', 'odd');
    });

    //grab all header rows
    $('thead th').each(function (column) {
        $(this).addClass('sortable')
     .click(function () {
         var findSortKey = function ($cell) {
             return $cell.find('.sort-key').text().toUpperCase() + ' ' + $cell.text().toUpperCase();
         };

         var sortDirection = $(this).is('.sorted-asc') ? -1 : 1;

         //step back up the tree and get the rows with data
         //for sorting
         var $rows = $(this).parent()
                .parent()
                .parent()
                .find('tbody tr')
                .get();

         //loop through all the rows and find 
         $.each($rows, function (index, row) {
             row.sortKey = findSortKey($(row).children('td').eq(column));
         });

         //compare and sort the rows alphabetically
         $rows.sort(function (a, b) {
             if (a.sortKey < b.sortKey) return -sortDirection;
             if (a.sortKey > b.sortKey) return sortDirection;
             return 0;
         });

         //add the rows in the correct order to the bottom of the table
         $.each($rows, function (index, row) {
             $('tbody').append(row);
             row.sortKey = null;
         });

         //identify the column sort order
         $('th').removeClass('sorted-asc sorted-desc');
         var $sortHead = $('th').filter(':nth-child(' + (column + 1) + ')');
         sortDirection == 1 ? $sortHead.addClass('sorted-asc') : $sortHead.addClass('sorted-desc');

         //identify the column to be sorted by
         $('td').removeClass('sorted')
         .filter(':nth-child(' + (column + 1) + ')')
         .addClass('sorted');

         $('.visible td').removeClass('odd');
         zebraRows('.visible:even td', 'odd');
     });
    });
});


//used to apply alternating row styles
function zebraRows(selector, className) {
    $(selector).removeClass(className)
       .addClass(className);
}

//filter results based on query
function filter(selector, query) {
    query = $.trim(query); //trim white space
    query = query.replace(/ /gi, '|'); //add OR for regex

    $(selector).each(function () {
        ($(this).text().search(new RegExp(query, "i")) < 0) ? $(this).hide().removeClass('visible') : $(this).show().addClass('visible');
    });
}