Tuesday, 23 July 2013

pageing,sorting and filteing in jquery datatable

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
    .A
    {
        list-style:none;
        width:940px;
    }
    .B
    {
        width:360px;
        float:left;
        text-align:right;
        padding-top:3px;
    }
    .C
    {
         width:20px;
        float:left;
        text-align:center;
        padding-top:3px;
        font-weight:900;
    }
     .D
    {
        width:560px;
        float:left;
        text-align:left;
        padding-top:3px;
    }
    th.headerSortUp
{
    background-image: url(images/arrow-up.png);
    background-position: right center;
    background-repeat: no-repeat;
    cursor: pointer;
}
th.headerSortDown
{
    background-image: url(images/arrow-down.png);
    background-position: right center;
    background-repeat: no-repeat;
    cursor: pointer;
}
    .mGrid
{
    width: 100%;
    height: 100%;
    background-color: #fff;
    margin: 5px 0 10px 0;
    border: 0px solid #525252;
    border-collapse: collapse;
}

.mGrid th
{
    padding: 4px 1px;
    color: #000;
    background: #ccdeec repeat-x top;
    border-left: 0px solid #a6c3dd;
    line-height: 30px;
    text-align: left;
    font: bold 12px Verdana;
}

.mGrid th a
{
    padding: 4px 2px;
    color: #000;
    background: #ccdeec repeat-x top;
    line-height: 30px;
    text-align: left;
    font: bold 12px Verdana;
    text-decoration: none;
}

.mGrid tr:nth-child(even)
{
    padding: 2px;
    border: 0px solid #c1c1c1;
    border: 0px solid #a6c3dd;
    font: normal 12px Verdana;
    text-transform: capitalize;
    height: 33px;
    background: #EFF3FB;
    text-align: left;
}



.mGrid tr:nth-child(odd)
{
    padding: 2px;
    border: 0px solid #c1c1c1;
    border: 0px solid #a6c3dd;
    font: normal 12px Verdana;
    text-transform: capitalize;
    height: 33px;
    color: #000;
    text-align: left;
}


.mGrid tr:nth-child(even):hover
{
    background: #478FB2;
    color: #000000;
}

.mGrid tr:nth-child(odd):hover
{
    background: #478FB2;
    color: #000000;
}


/*
  .mGrid td {
    padding: 2px;
    border: solid 1px #c1c1c1;
    color:#000;
    border: solid 1px #a6c3dd;
    font:normal 12px Verdana;
    text-transform:capitalize;
    height:25px;
   
   
}
 */
.mGrid .select
{
    background: #303030;
}

.mGrid .pgr
{
    height: 32px;
    width: 33%;
    background-color: #d5e3ef;
    font-family: Verdana;
    color: #000000;
    font-size: 12px;
    text-indent: 10px;
    border-right: solid 1px #9abbd9;
}
.divGrid
{
    width: 100%;
    height: 380px;
    overflow: auto;
}
    </style>

    <script src="jquery-1.9.1.js" type="text/javascript"></script>
   <script language="javascript" type="text/javascript">
       /**
       * tablePagination - A table plugin for jQuery that creates pagination elements
       *
       * http://neoalchemy.org/tablePagination.html
       *
       * Copyright (c) 2009 Ryan Zielke (neoalchemy.com)
       * Dual licensed under the MIT and GPL licenses:
       * http://www.opensource.org/licenses/mit-license.php
       *
       * @name tablePagination
       * @type jQuery
       * @param Object settings;
       *      firstArrow - Image - Pass in an image to replace default image. Default: (new Image()).src="./images/first.gif"
       *      prevArrow - Image - Pass in an image to replace default image. Default: (new Image()).src="./images/prev.gif"
       *      lastArrow - Image - Pass in an image to replace default image. Default: (new Image()).src="./images/last.gif"
       *      nextArrow - Image - Pass in an image to replace default image. Default: (new Image()).src="./images/next.gif"
       *      rowsPerPage - Number - used to determine the starting rows per page. Default: 5
       *      currPage - Number - This is to determine what the starting current page is. Default: 1
       *      optionsForRows - Array - This is to set the values on the rows per page. Default: [5,10,25,50,100]
       *      ignoreRows - Array - This is to specify which 'tr' rows to ignore. It is recommended that you have those rows be invisible as they will mess with page counts. Default: []
       *
       *
       * @author Ryan Zielke (neoalchemy.org)
       * @version 0.1.0
       * @requires jQuery v1.2.3 or above
       */

       (function ($) {

           $.fn.tablePagination = function (settings) {
               var defaults = {
                   firstArrow: (new Image()).src = "images/first.gif",
                   prevArrow: (new Image()).src = "images/prev.gif",
                   lastArrow: (new Image()).src = "images/last.gif",
                   nextArrow: (new Image()).src = "images/next.gif",
                   rowsPerPage: 10,
                   currPage: 1,
                   optionsForRows: [5, 10, 15, 20],
                   ignoreRows: []
               };
               settings = $.extend(defaults, settings);

               return this.each(function () {
                   var table = $(this)[0];
                   var totalPagesId = '#' + table.id + '+#tablePagination #tablePagination_totalPages';
                   var currPageId = '#' + table.id + '+#tablePagination #tablePagination_currPage';
                   var rowsPerPageId = '#' + table.id + '+#tablePagination #tablePagination_rowsPerPage';
                   var firstPageId = '#' + table.id + '+#tablePagination #tablePagination_firstPage';
                   var prevPageId = '#' + table.id + '+#tablePagination #tablePagination_prevPage';
                   var nextPageId = '#' + table.id + '+#tablePagination #tablePagination_nextPage';
                   var lastPageId = '#' + table.id + '+#tablePagination #tablePagination_lastPage';

                   var possibleTableRows = $.makeArray($('tbody tr', table));
                   var tableRows = $.grep(possibleTableRows, function (value, index) {
                       return ($.inArray(value, defaults.ignoreRows) == -1);
                   }, false)

                   var numRows = tableRows.length
                   var totalPages = resetTotalPages();
                   var currPageNumber = (defaults.currPage > totalPages) ? 1 : defaults.currPage;
                   if ($.inArray(defaults.rowsPerPage, defaults.optionsForRows) == -1)
                       defaults.optionsForRows.push(defaults.rowsPerPage);


                   function hideOtherPages(pageNum) {
                       if (pageNum == 0 || pageNum > totalPages)
                           return;
                       var startIndex = (pageNum - 1) * defaults.rowsPerPage;
                       var endIndex = (startIndex + defaults.rowsPerPage - 1);
                       $(tableRows).show();
                       for (var i = 0; i < tableRows.length; i++) {
                           if (i < startIndex || i > endIndex) {
                               $(tableRows[i]).hide()
                           }
                       }
                   }

                   function resetTotalPages() {
                       var preTotalPages = Math.round(numRows / defaults.rowsPerPage);
                       var totalPages = (preTotalPages * defaults.rowsPerPage < numRows) ? preTotalPages + 1 : preTotalPages;
                       if ($(totalPagesId).length > 0)
                           $(totalPagesId).html(totalPages);
                       return totalPages;
                   }

                   function resetCurrentPage(currPageNum) {
                       if (currPageNum < 1 || currPageNum > totalPages)
                           return;
                       currPageNumber = currPageNum;
                       hideOtherPages(currPageNumber);
                       $(currPageId).val(currPageNumber)
                   }

                   function resetPerPageValues() {
                       var isRowsPerPageMatched = false;
                       var optsPerPage = defaults.optionsForRows;
                       optsPerPage.sort();
                       var perPageDropdown = $(rowsPerPageId)[0];
                       perPageDropdown.length = 0;
                       for (var i = 0; i < optsPerPage.length; i++) {
                           if (optsPerPage[i] == defaults.rowsPerPage) {
                               perPageDropdown.options[i] = new Option(optsPerPage[i], optsPerPage[i], true, true);
                               isRowsPerPageMatched = true;
                           }
                           else {
                               perPageDropdown.options[i] = new Option(optsPerPage[i], optsPerPage[i]);
                           }
                       }
                       if (!isRowsPerPageMatched) {
                           defaults.optionsForRows == optsPerPage[0];
                       }
                   }

                   function createPaginationElements() {
                       var htmlBuffer = [];
                       htmlBuffer.push("<div id='tablePagination'>");
                       htmlBuffer.push("<span id='tablePagination_perPage'>");
                       htmlBuffer.push("<select id='tablePagination_rowsPerPage'><option value='5'>5</option></select>");
                       htmlBuffer.push("per page");
                       htmlBuffer.push("</span>");
                       htmlBuffer.push("<span id='tablePagination_paginater'>");
                       htmlBuffer.push("<img id='tablePagination_firstPage' src='" + defaults.firstArrow + "'>");
                       htmlBuffer.push("<img id='tablePagination_prevPage' src='" + defaults.prevArrow + "'>");
                       htmlBuffer.push("Page");
                       htmlBuffer.push("<input id='tablePagination_currPage' type='input' value='" + currPageNumber + "' size='1'>");
                       htmlBuffer.push("of <span id='tablePagination_totalPages'>" + totalPages + "</span>");
                       htmlBuffer.push("<img id='tablePagination_nextPage' src='" + defaults.nextArrow + "'>");
                       htmlBuffer.push("<img id='tablePagination_lastPage' src='" + defaults.lastArrow + "'>");
                       htmlBuffer.push("</span>");
                       htmlBuffer.push("</div>");
                       return htmlBuffer.join("").toString();
                   }

                   if ($(totalPagesId).length == 0) {
                       $(this).after(createPaginationElements());
                   }
                   else {
                       $('#tablePagination_currPage').val(currPageNumber);
                   }
                   resetPerPageValues();
                   hideOtherPages(currPageNumber);

                   $(firstPageId).bind('click', function (e) {
                       resetCurrentPage(1)
                   });

                   $(prevPageId).bind('click', function (e) {
                       resetCurrentPage(currPageNumber - 1)
                   });

                   $(nextPageId).bind('click', function (e) {
                       resetCurrentPage(currPageNumber + 1)
                   });

                   $(lastPageId).bind('click', function (e) {
                       resetCurrentPage(totalPages)
                   });

                   $(currPageId).bind('change', function (e) {
                       resetCurrentPage(this.value)
                   });

                   $(rowsPerPageId).bind('change', function (e) {
                       defaults.rowsPerPage = parseInt(this.value, 10);
                       totalPages = resetTotalPages();
                       resetCurrentPage(1)
                   });

               })
           };
       })(jQuery);
  
  
   </script>
   <script language="javascript" type="text/javascript">
       /*
       *
       * TableSorter 2.0 - Client-side table sorting with ease!
       * Version 2.0.5b
       * @requires jQuery v1.2.3
       *
       * Copyright (c) 2007 Christian Bach
       * Examples and docs at: http://tablesorter.com
       * Dual licensed under the MIT and GPL licenses:
       * http://www.opensource.org/licenses/mit-license.php
       * http://www.gnu.org/licenses/gpl.html
       *
       */
       /**
       *
       * @description Create a sortable table with multi-column sorting capabilitys
       *
       * @example $('table').tablesorter();
       * @desc Create a simple tablesorter interface.
       *
       * @example $('table').tablesorter({ sortList:[[0,0],[1,0]] });
       * @desc Create a tablesorter interface and sort on the first and secound column column headers.
       *
       * @example $('table').tablesorter({ headers: { 0: { sorter: false}, 1: {sorter: false} } });
       *         
       * @desc Create a tablesorter interface and disableing the first and second  column headers.
       *     
       *
       * @example $('table').tablesorter({ headers: { 0: {sorter:"integer"}, 1: {sorter:"currency"} } });
       *
       * @desc Create a tablesorter interface and set a column parser for the first
       *       and second column.
       *
       *
       * @param Object
       *            settings An object literal containing key/value pairs to provide
       *            optional settings.
       *
       *
       * @option String cssHeader (optional) A string of the class name to be appended
       *         to sortable tr elements in the thead of the table. Default value:
       *         "header"
       *
       * @option String cssAsc (optional) A string of the class name to be appended to
       *         sortable tr elements in the thead on a ascending sort. Default value:
       *         "headerSortUp"
       *
       * @option String cssDesc (optional) A string of the class name to be appended
       *         to sortable tr elements in the thead on a descending sort. Default
       *         value: "headerSortDown"
       *
       * @option String sortInitialOrder (optional) A string of the inital sorting
       *         order can be asc or desc. Default value: "asc"
       *
       * @option String sortMultisortKey (optional) A string of the multi-column sort
       *         key. Default value: "shiftKey"
       *
       * @option String textExtraction (optional) A string of the text-extraction
       *         method to use. For complex html structures inside td cell set this
       *         option to "complex", on large tables the complex option can be slow.
       *         Default value: "simple"
       *
       * @option Object headers (optional) An array containing the forces sorting
       *         rules. This option let's you specify a default sorting rule. Default
       *         value: null
       *
       * @option Array sortList (optional) An array containing the forces sorting
       *         rules. This option let's you specify a default sorting rule. Default
       *         value: null
       *
       * @option Array sortForce (optional) An array containing forced sorting rules.
       *         This option let's you specify a default sorting rule, which is
       *         prepended to user-selected rules. Default value: null
       *
       * @option Boolean sortLocaleCompare (optional) Boolean flag indicating whatever
       *         to use String.localeCampare method or not. Default set to true.
       *
       *
       * @option Array sortAppend (optional) An array containing forced sorting rules.
       *         This option let's you specify a default sorting rule, which is
       *         appended to user-selected rules. Default value: null
       *
       * @option Boolean widthFixed (optional) Boolean flag indicating if tablesorter
       *         should apply fixed widths to the table columns. This is usefull when
       *         using the pager companion plugin. This options requires the dimension
       *         jquery plugin. Default value: false
       *
       * @option Boolean cancelSelection (optional) Boolean flag indicating if
       *         tablesorter should cancel selection of the table headers text.
       *         Default value: true
       *
       * @option Boolean debug (optional) Boolean flag indicating if tablesorter
       *         should display debuging information usefull for development.
       *
       * @type jQuery
       *
       * @name tablesorter
       *
       * @cat Plugins/Tablesorter
       *
       * @author Christian Bach/christian.bach@polyester.se
       */

       (function ($) {
           $.extend({
               tablesorter: new
        function () {

            var parsers = [],
                widgets = [];

            this.defaults = {
                cssHeader: "header",
                cssAsc: "headerSortUp",
                cssDesc: "headerSortDown",
                cssChildRow: "expand-child",
                sortInitialOrder: "asc",
                sortMultiSortKey: "shiftKey",
                sortForce: null,
                sortAppend: null,
                sortLocaleCompare: true,
                textExtraction: "simple",
                parsers: {}, widgets: [],
                widgetZebra: {
                    css: ["even", "odd"]
                }, headers: {}, widthFixed: false,
                cancelSelection: true,
                sortList: [],
                headerList: [],
                dateFormat: "us",
                decimal: '/\.|\,/g',
                onRenderHeader: null,
                selectorHeaders: 'thead th',
                debug: false
            };

            /* debuging utils */

            function benchmark(s, d) {
                log(s + "," + (new Date().getTime() - d.getTime()) + "ms");
            }

            this.benchmark = benchmark;

            function log(s) {
                if (typeof console != "undefined" && typeof console.debug != "undefined") {
                    console.log(s);
                } else {
                    alert(s);
                }
            }

            /* parsers utils */

            function buildParserCache(table, $headers) {

                if (table.config.debug) {
                    var parsersDebug = "";
                }

                if (table.tBodies.length == 0) return; // In the case of empty tables
                var rows = table.tBodies[0].rows;

                if (rows[0]) {

                    var list = [],
                        cells = rows[0].cells,
                        l = cells.length;

                    for (var i = 0; i < l; i++) {

                        var p = false;

                        if ($.metadata && ($($headers[i]).metadata() && $($headers[i]).metadata().sorter)) {

                            p = getParserById($($headers[i]).metadata().sorter);

                        } else if ((table.config.headers[i] && table.config.headers[i].sorter)) {

                            p = getParserById(table.config.headers[i].sorter);
                        }
                        if (!p) {

                            p = detectParserForColumn(table, rows, -1, i);
                        }

                        if (table.config.debug) {
                            parsersDebug += "column:" + i + " parser:" + p.id + "\n";
                        }

                        list.push(p);
                    }
                }

                if (table.config.debug) {
                    log(parsersDebug);
                }

                return list;
            };

            function detectParserForColumn(table, rows, rowIndex, cellIndex) {
                var l = parsers.length,
                    node = false,
                    nodeValue = false,
                    keepLooking = true;
                while (nodeValue == '' && keepLooking) {
                    rowIndex++;
                    if (rows[rowIndex]) {
                        node = getNodeFromRowAndCellIndex(rows, rowIndex, cellIndex);
                        nodeValue = trimAndGetNodeText(table.config, node);
                        if (table.config.debug) {
                            log('Checking if value was empty on row:' + rowIndex);
                        }
                    } else {
                        keepLooking = false;
                    }
                }
                for (var i = 1; i < l; i++) {
                    if (parsers[i].is(nodeValue, table, node)) {
                        return parsers[i];
                    }
                }
                // 0 is always the generic parser (text)
                return parsers[0];
            }

            function getNodeFromRowAndCellIndex(rows, rowIndex, cellIndex) {
                return rows[rowIndex].cells[cellIndex];
            }

            function trimAndGetNodeText(config, node) {
                return $.trim(getElementText(config, node));
            }

            function getParserById(name) {
                var l = parsers.length;
                for (var i = 0; i < l; i++) {
                    if (parsers[i].id.toLowerCase() == name.toLowerCase()) {
                        return parsers[i];
                    }
                }
                return false;
            }

            /* utils */

            function buildCache(table) {

                if (table.config.debug) {
                    var cacheTime = new Date();
                }

                var totalRows = (table.tBodies[0] && table.tBodies[0].rows.length) || 0,
                    totalCells = (table.tBodies[0].rows[0] && table.tBodies[0].rows[0].cells.length) || 0,
                    parsers = table.config.parsers,
                    cache = {
                        row: [],
                        normalized: []
                    };

                for (var i = 0; i < totalRows; ++i) {

                    /** Add the table data to main data array */
                    var c = $(table.tBodies[0].rows[i]),
                        cols = [];

                    // if this is a child row, add it to the last row's children and
                    // continue to the next row
                    if (c.hasClass(table.config.cssChildRow)) {
                        cache.row[cache.row.length - 1] = cache.row[cache.row.length - 1].add(c);
                        // go to the next for loop
                        continue;
                    }

                    cache.row.push(c);

                    for (var j = 0; j < totalCells; ++j) {
                        cols.push(parsers[j].format(getElementText(table.config, c[0].cells[j]), table, c[0].cells[j]));
                    }

                    cols.push(cache.normalized.length); // add position for rowCache
                    cache.normalized.push(cols);
                    cols = null;
                };

                if (table.config.debug) {
                    benchmark("Building cache for " + totalRows + " rows:", cacheTime);
                }

                return cache;
            };

            function getElementText(config, node) {

                var text = "";

                if (!node) return "";

                if (!config.supportsTextContent) config.supportsTextContent = node.textContent || false;

                if (config.textExtraction == "simple") {
                    if (config.supportsTextContent) {
                        text = node.textContent;
                    } else {
                        if (node.childNodes[0] && node.childNodes[0].hasChildNodes()) {
                            text = node.childNodes[0].innerHTML;
                        } else {
                            text = node.innerHTML;
                        }
                    }
                } else {
                    if (typeof (config.textExtraction) == "function") {
                        text = config.textExtraction(node);
                    } else {
                        text = $(node).text();
                    }
                }
                return text;
            }

            function appendToTable(table, cache) {

                if (table.config.debug) {
                    var appendTime = new Date()
                }

                var c = cache,
                    r = c.row,
                    n = c.normalized,
                    totalRows = n.length,
                    checkCell = (n[0].length - 1),
                    tableBody = $(table.tBodies[0]),
                    rows = [];


                for (var i = 0; i < totalRows; i++) {
                    var pos = n[i][checkCell];

                    rows.push(r[pos]);

                    if (!table.config.appender) {

                        //var o = ;
                        var l = r[pos].length;
                        for (var j = 0; j < l; j++) {
                            tableBody[0].appendChild(r[pos][j]);
                        }

                        //
                    }
                }



                if (table.config.appender) {

                    table.config.appender(table, rows);
                }

                rows = null;

                if (table.config.debug) {
                    benchmark("Rebuilt table:", appendTime);
                }

                // apply table widgets
                applyWidget(table);

                // trigger sortend
                setTimeout(function () {
                    $(table).trigger("sortEnd");
                }, 0);

            };

            function buildHeaders(table) {

                if (table.config.debug) {
                    var time = new Date();
                }

                var meta = ($.metadata) ? true : false;

                var header_index = computeTableHeaderCellIndexes(table);

                $tableHeaders = $(table.config.selectorHeaders, table).each(function (index) {

                    this.column = header_index[this.parentNode.rowIndex + "-" + this.cellIndex];
                    // this.column = index;
                    this.order = formatSortingOrder(table.config.sortInitialOrder);


                    this.count = this.order;

                    if (checkHeaderMetadata(this) || checkHeaderOptions(table, index)) this.sortDisabled = true;
                    if (checkHeaderOptionsSortingLocked(table, index)) this.order = this.lockedOrder = checkHeaderOptionsSortingLocked(table, index);

                    if (!this.sortDisabled) {
                        var $th = $(this).addClass(table.config.cssHeader);
                        if (table.config.onRenderHeader) table.config.onRenderHeader.apply($th);
                    }

                    // add cell to headerList
                    table.config.headerList[index] = this;
                });

                if (table.config.debug) {
                    benchmark("Built headers:", time);
                    log($tableHeaders);
                }

                return $tableHeaders;

            };

            // from:
            // http://www.javascripttoolbox.com/lib/table/examples.php
            // http://www.javascripttoolbox.com/temp/table_cellindex.html


            function computeTableHeaderCellIndexes(t) {
                var matrix = [];
                var lookup = {};
                var thead = t.getElementsByTagName('THEAD')[0];
                var trs = thead.getElementsByTagName('TR');

                for (var i = 0; i < trs.length; i++) {
                    var cells = trs[i].cells;
                    for (var j = 0; j < cells.length; j++) {
                        var c = cells[j];

                        var rowIndex = c.parentNode.rowIndex;
                        var cellId = rowIndex + "-" + c.cellIndex;
                        var rowSpan = c.rowSpan || 1;
                        var colSpan = c.colSpan || 1
                        var firstAvailCol;
                        if (typeof (matrix[rowIndex]) == "undefined") {
                            matrix[rowIndex] = [];
                        }
                        // Find first available column in the first row
                        for (var k = 0; k < matrix[rowIndex].length + 1; k++) {
                            if (typeof (matrix[rowIndex][k]) == "undefined") {
                                firstAvailCol = k;
                                break;
                            }
                        }
                        lookup[cellId] = firstAvailCol;
                        for (var k = rowIndex; k < rowIndex + rowSpan; k++) {
                            if (typeof (matrix[k]) == "undefined") {
                                matrix[k] = [];
                            }
                            var matrixrow = matrix[k];
                            for (var l = firstAvailCol; l < firstAvailCol + colSpan; l++) {
                                matrixrow[l] = "x";
                            }
                        }
                    }
                }
                return lookup;
            }

            function checkCellColSpan(table, rows, row) {
                var arr = [],
                    r = table.tHead.rows,
                    c = r[row].cells;

                for (var i = 0; i < c.length; i++) {
                    var cell = c[i];

                    if (cell.colSpan > 1) {
                        arr = arr.concat(checkCellColSpan(table, headerArr, row++));
                    } else {
                        if (table.tHead.length == 1 || (cell.rowSpan > 1 || !r[row + 1])) {
                            arr.push(cell);
                        }
                        // headerArr[row] = (i+row);
                    }
                }
                return arr;
            };

            function checkHeaderMetadata(cell) {
                if (($.metadata) && ($(cell).metadata().sorter === false)) {
                    return true;
                };
                return false;
            }

            function checkHeaderOptions(table, i) {
                if ((table.config.headers[i]) && (table.config.headers[i].sorter === false)) {
                    return true;
                };
                return false;
            }

            function checkHeaderOptionsSortingLocked(table, i) {
                if ((table.config.headers[i]) && (table.config.headers[i].lockedOrder)) return table.config.headers[i].lockedOrder;
                return false;
            }

            function applyWidget(table) {
                var c = table.config.widgets;
                var l = c.length;
                for (var i = 0; i < l; i++) {

                    getWidgetById(c[i]).format(table);
                }

            }

            function getWidgetById(name) {
                var l = widgets.length;
                for (var i = 0; i < l; i++) {
                    if (widgets[i].id.toLowerCase() == name.toLowerCase()) {
                        return widgets[i];
                    }
                }
            };

            function formatSortingOrder(v) {
                if (typeof (v) != "Number") {
                    return (v.toLowerCase() == "desc") ? 1 : 0;
                } else {
                    return (v == 1) ? 1 : 0;
                }
            }

            function isValueInArray(v, a) {
                var l = a.length;
                for (var i = 0; i < l; i++) {
                    if (a[i][0] == v) {
                        return true;
                    }
                }
                return false;
            }

            function setHeadersCss(table, $headers, list, css) {
                // remove all header information
                $headers.removeClass(css[0]).removeClass(css[1]);

                var h = [];
                $headers.each(function (offset) {
                    if (!this.sortDisabled) {
                        h[this.column] = $(this);
                    }
                });

                var l = list.length;
                for (var i = 0; i < l; i++) {
                    h[list[i][0]].addClass(css[list[i][1]]);
                }
            }

            function fixColumnWidth(table, $headers) {
                var c = table.config;
                if (c.widthFixed) {
                    var colgroup = $('<colgroup>');
                    $("tr:first td", table.tBodies[0]).each(function () {
                        colgroup.append($('<col>').css('width', $(this).width()));
                    });
                    $(table).prepend(colgroup);
                };
            }

            function updateHeaderSortCount(table, sortList) {
                var c = table.config,
                    l = sortList.length;
                for (var i = 0; i < l; i++) {
                    var s = sortList[i],
                        o = c.headerList[s[0]];
                    o.count = s[1];
                    o.count++;
                }
            }

            /* sorting methods */

            function multisort(table, sortList, cache) {

                if (table.config.debug) {
                    var sortTime = new Date();
                }

                var dynamicExp = "var sortWrapper = function(a,b) {",
                    l = sortList.length;

                // TODO: inline functions.
                for (var i = 0; i < l; i++) {

                    var c = sortList[i][0];
                    var order = sortList[i][1];
                    // var s = (getCachedSortType(table.config.parsers,c) == "text") ?
                    // ((order == 0) ? "sortText" : "sortTextDesc") : ((order == 0) ?
                    // "sortNumeric" : "sortNumericDesc");
                    // var s = (table.config.parsers[c].type == "text") ? ((order == 0)
                    // ? makeSortText(c) : makeSortTextDesc(c)) : ((order == 0) ?
                    // makeSortNumeric(c) : makeSortNumericDesc(c));
                    var s = (table.config.parsers[c].type == "text") ? ((order == 0) ? makeSortFunction("text", "asc", c) : makeSortFunction("text", "desc", c)) : ((order == 0) ? makeSortFunction("numeric", "asc", c) : makeSortFunction("numeric", "desc", c));
                    var e = "e" + i;

                    dynamicExp += "var " + e + " = " + s; // + "(a[" + c + "],b[" + c
                    // + "]); ";
                    dynamicExp += "if(" + e + ") { return " + e + "; } ";
                    dynamicExp += "else { ";

                }

                // if value is the same keep orignal order
                var orgOrderCol = cache.normalized[0].length - 1;
                dynamicExp += "return a[" + orgOrderCol + "]-b[" + orgOrderCol + "];";

                for (var i = 0; i < l; i++) {
                    dynamicExp += "}; ";
                }

                dynamicExp += "return 0; ";
                dynamicExp += "}; ";

                if (table.config.debug) {
                    benchmark("Evaling expression:" + dynamicExp, new Date());
                }

                eval(dynamicExp);

                cache.normalized.sort(sortWrapper);

                if (table.config.debug) {
                    benchmark("Sorting on " + sortList.toString() + " and dir " + order + " time:", sortTime);
                }

                return cache;
            };

            function makeSortFunction(type, direction, index) {
                var a = "a[" + index + "]",
                    b = "b[" + index + "]";
                if (type == 'text' && direction == 'asc') {
                    return "(" + a + " == " + b + " ? 0 : (" + a + " === null ? Number.POSITIVE_INFINITY : (" + b + " === null ? Number.NEGATIVE_INFINITY : (" + a + " < " + b + ") ? -1 : 1 )));";
                } else if (type == 'text' && direction == 'desc') {
                    return "(" + a + " == " + b + " ? 0 : (" + a + " === null ? Number.POSITIVE_INFINITY : (" + b + " === null ? Number.NEGATIVE_INFINITY : (" + b + " < " + a + ") ? -1 : 1 )));";
                } else if (type == 'numeric' && direction == 'asc') {
                    return "(" + a + " === null && " + b + " === null) ? 0 :(" + a + " === null ? Number.POSITIVE_INFINITY : (" + b + " === null ? Number.NEGATIVE_INFINITY : " + a + " - " + b + "));";
                } else if (type == 'numeric' && direction == 'desc') {
                    return "(" + a + " === null && " + b + " === null) ? 0 :(" + a + " === null ? Number.POSITIVE_INFINITY : (" + b + " === null ? Number.NEGATIVE_INFINITY : " + b + " - " + a + "));";
                }
            };

            function makeSortText(i) {
                return "((a[" + i + "] < b[" + i + "]) ? -1 : ((a[" + i + "] > b[" + i + "]) ? 1 : 0));";
            };

            function makeSortTextDesc(i) {
                return "((b[" + i + "] < a[" + i + "]) ? -1 : ((b[" + i + "] > a[" + i + "]) ? 1 : 0));";
            };

            function makeSortNumeric(i) {
                return "a[" + i + "]-b[" + i + "];";
            };

            function makeSortNumericDesc(i) {
                return "b[" + i + "]-a[" + i + "];";
            };

            function sortText(a, b) {
                if (table.config.sortLocaleCompare) return a.localeCompare(b);
                return ((a < b) ? -1 : ((a > b) ? 1 : 0));
            };

            function sortTextDesc(a, b) {
                if (table.config.sortLocaleCompare) return b.localeCompare(a);
                return ((b < a) ? -1 : ((b > a) ? 1 : 0));
            };

            function sortNumeric(a, b) {
                return a - b;
            };

            function sortNumericDesc(a, b) {
                return b - a;
            };

            function getCachedSortType(parsers, i) {
                return parsers[i].type;
            }; /* public methods */
            this.construct = function (settings) {
                return this.each(function () {
                    // if no thead or tbody quit.
                    if (!this.tHead || !this.tBodies) return;
                    // declare
                    var $this, $document, $headers, cache, config, shiftDown = 0,
                        sortOrder;
                    // new blank config object
                    this.config = {};
                    // merge and extend.
                    config = $.extend(this.config, $.tablesorter.defaults, settings);
                    // store common expression for speed
                    $this = $(this);
                    // save the settings where they read
                    $.data(this, "tablesorter", config);
                    // build headers
                    $headers = buildHeaders(this);
                    // try to auto detect column type, and store in tables config
                    this.config.parsers = buildParserCache(this, $headers);
                    // build the cache for the tbody cells
                    cache = buildCache(this);
                    // get the css class names, could be done else where.
                    var sortCSS = [config.cssDesc, config.cssAsc];
                    // fixate columns if the users supplies the fixedWidth option
                    fixColumnWidth(this);
                    // apply event handling to headers
                    // this is to big, perhaps break it out?
                    $headers.click(

                    function (e) {
                        var totalRows = ($this[0].tBodies[0] && $this[0].tBodies[0].rows.length) || 0;
                        if (!this.sortDisabled && totalRows > 0) {
                            // Only call sortStart if sorting is
                            // enabled.
                            $this.trigger("sortStart");
                            // store exp, for speed
                            var $cell = $(this);
                            // get current column index
                            var i = this.column;
                            // get current column sort order
                            this.order = this.count++ % 2;
                            // always sort on the locked order.
                            if (this.lockedOrder) this.order = this.lockedOrder;

                            // user only whants to sort on one
                            // column
                            if (!e[config.sortMultiSortKey]) {
                                // flush the sort list
                                config.sortList = [];
                                if (config.sortForce != null) {
                                    var a = config.sortForce;
                                    for (var j = 0; j < a.length; j++) {
                                        if (a[j][0] != i) {
                                            config.sortList.push(a[j]);
                                        }
                                    }
                                }
                                // add column to sort list
                                config.sortList.push([i, this.order]);
                                // multi column sorting
                            } else {
                                // the user has clicked on an all
                                // ready sortet column.
                                if (isValueInArray(i, config.sortList)) {
                                    // revers the sorting direction
                                    // for all tables.
                                    for (var j = 0; j < config.sortList.length; j++) {
                                        var s = config.sortList[j],
                                            o = config.headerList[s[0]];
                                        if (s[0] == i) {
                                            o.count = s[1];
                                            o.count++;
                                            s[1] = o.count % 2;
                                        }
                                    }
                                } else {
                                    // add column to sort list array
                                    config.sortList.push([i, this.order]);
                                }
                            };
                            setTimeout(function () {
                                // set css for headers
                                setHeadersCss($this[0], $headers, config.sortList, sortCSS);
                                appendToTable(
                                    $this[0], multisort(
                                    $this[0], config.sortList, cache)
                                );
                            }, 1);
                            // stop normal event by returning false
                            return false;
                        }
                        // cancel selection
                    }).mousedown(function () {
                        if (config.cancelSelection) {
                            this.onselectstart = function () {
                                return false
                            };
                            return false;
                        }
                    });
                    // apply easy methods that trigger binded events
                    $this.bind("update", function () {
                        var me = this;
                        setTimeout(function () {
                            // rebuild parsers.
                            me.config.parsers = buildParserCache(
                            me, $headers);
                            // rebuild the cache map
                            cache = buildCache(me);
                        }, 1);
                    }).bind("updateCell", function (e, cell) {
                        var config = this.config;
                        // get position from the dom.
                        var pos = [(cell.parentNode.rowIndex - 1), cell.cellIndex];
                        // update cache
                        cache.normalized[pos[0]][pos[1]] = config.parsers[pos[1]].format(
                        getElementText(config, cell), cell);
                    }).bind("sorton", function (e, list) {
                        $(this).trigger("sortStart");
                        config.sortList = list;
                        // update and store the sortlist
                        var sortList = config.sortList;
                        // update header count index
                        updateHeaderSortCount(this, sortList);
                        // set css for headers
                        setHeadersCss(this, $headers, sortList, sortCSS);
                        // sort the table and append it to the dom
                        appendToTable(this, multisort(this, sortList, cache));
                    }).bind("appendCache", function () {
                        appendToTable(this, cache);
                    }).bind("applyWidgetId", function (e, id) {
                        getWidgetById(id).format(this);
                    }).bind("applyWidgets", function () {
                        // apply widgets
                        applyWidget(this);
                    });
                    if ($.metadata && ($(this).metadata() && $(this).metadata().sortlist)) {
                        config.sortList = $(this).metadata().sortlist;
                    }
                    // if user has supplied a sort list to constructor.
                    if (config.sortList.length > 0) {
                        $this.trigger("sorton", [config.sortList]);
                    }
                    // apply widgets
                    applyWidget(this);
                });
            };
            this.addParser = function (parser) {
                var l = parsers.length,
                    a = true;
                for (var i = 0; i < l; i++) {
                    if (parsers[i].id.toLowerCase() == parser.id.toLowerCase()) {
                        a = false;
                    }
                }
                if (a) {
                    parsers.push(parser);
                };
            };
            this.addWidget = function (widget) {
                widgets.push(widget);
            };
            this.formatFloat = function (s) {
                var i = parseFloat(s);
                return (isNaN(i)) ? 0 : i;
            };
            this.formatInt = function (s) {
                var i = parseInt(s);
                return (isNaN(i)) ? 0 : i;
            };
            this.isDigit = function (s, config) {
                // replace all an wanted chars and match.
                return /^[-+]?\d*$/.test($.trim(s.replace(/[,.']/g, '')));
            };
            this.clearTableBody = function (table) {
                if ($.browser.msie) {
                    function empty() {
                        while (this.firstChild)
                            this.removeChild(this.firstChild);
                    }
                    empty.apply(table.tBodies[0]);
                } else {
                    table.tBodies[0].innerHTML = "";
                }
            };
        }
           });

           // extend plugin scope
           $.fn.extend({
               tablesorter: $.tablesorter.construct
           });

           // make shortcut
           var ts = $.tablesorter;

           // add default parsers
           ts.addParser({
               id: "text",
               is: function (s) {
                   return true;
               }, format: function (s) {
                   return $.trim(s.toLocaleLowerCase());
               }, type: "text"
           });

           ts.addParser({
               id: "digit",
               is: function (s, table) {
                   var c = table.config;
                   return $.tablesorter.isDigit(s, c);
               }, format: function (s) {
                   return $.tablesorter.formatFloat(s);
               }, type: "numeric"
           });

           ts.addParser({
               id: "currency",
               is: function (s) {
                   return /^[£$€?.]/.test(s);
               }, format: function (s) {
                   return $.tablesorter.formatFloat(s.replace(new RegExp(/[£$€]/g), ""));
               }, type: "numeric"
           });

           ts.addParser({
               id: "ipAddress",
               is: function (s) {
                   return /^\d{2,3}[\.]\d{2,3}[\.]\d{2,3}[\.]\d{2,3}$/.test(s);
               }, format: function (s) {
                   var a = s.split("."),
                r = "",
                l = a.length;
                   for (var i = 0; i < l; i++) {
                       var item = a[i];
                       if (item.length == 2) {
                           r += "0" + item;
                       } else {
                           r += item;
                       }
                   }
                   return $.tablesorter.formatFloat(r);
               }, type: "numeric"
           });

           ts.addParser({
               id: "url",
               is: function (s) {
                   return /^(https?|ftp|file):\/\/$/.test(s);
               }, format: function (s) {
                   return jQuery.trim(s.replace(new RegExp(/(https?|ftp|file):\/\//), ''));
               }, type: "text"
           });

           ts.addParser({
               id: "isoDate",
               is: function (s) {
                   return /^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test(s);
               }, format: function (s) {
                   return $.tablesorter.formatFloat((s != "") ? new Date(s.replace(
            new RegExp(/-/g), "/")).getTime() : "0");
               }, type: "numeric"
           });

           ts.addParser({
               id: "percent",
               is: function (s) {
                   return /\%$/.test($.trim(s));
               }, format: function (s) {
                   return $.tablesorter.formatFloat(s.replace(new RegExp(/%/g), ""));
               }, type: "numeric"
           });

           ts.addParser({
               id: "usLongDate",
               is: function (s) {
                   return s.match(new RegExp(/^[A-Za-z]{3,10}\.? [0-9]{1,2}, ([0-9]{4}|'?[0-9]{2}) (([0-2]?[0-9]:[0-5][0-9])|([0-1]?[0-9]:[0-5][0-9]\s(AM|PM)))$/));
               }, format: function (s) {
                   return $.tablesorter.formatFloat(new Date(s).getTime());
               }, type: "numeric"
           });

           ts.addParser({
               id: "shortDate",
               is: function (s) {
                   return /\d{1,2}[\/\-]\d{1,2}[\/\-]\d{2,4}/.test(s);
               }, format: function (s, table) {
                   var c = table.config;
                   s = s.replace(/\-/g, "/");
                   if (c.dateFormat == "us") {
                       // reformat the string in ISO format
                       s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})/, "$3/$1/$2");
                   } else if (c.dateFormat == "uk") {
                       // reformat the string in ISO format
                       s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})/, "$3/$2/$1");
                   } else if (c.dateFormat == "dd/mm/yy" || c.dateFormat == "dd-mm-yy") {
                       s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{2})/, "$1/$2/$3");
                   }
                   return $.tablesorter.formatFloat(new Date(s).getTime());
               }, type: "numeric"
           });
           ts.addParser({
               id: "time",
               is: function (s) {
                   return /^(([0-2]?[0-9]:[0-5][0-9])|([0-1]?[0-9]:[0-5][0-9]\s(am|pm)))$/.test(s);
               }, format: function (s) {
                   return $.tablesorter.formatFloat(new Date("2000/01/01 " + s).getTime());
               }, type: "numeric"
           });
           ts.addParser({
               id: "metadata",
               is: function (s) {
                   return false;
               }, format: function (s, table, cell) {
                   var c = table.config,
                p = (!c.parserMetadataName) ? 'sortValue' : c.parserMetadataName;
                   return $(cell).metadata()[p];
               }, type: "numeric"
           });
           // add default widgets
           ts.addWidget({
               id: "zebra",
               format: function (table) {
                   if (table.config.debug) {
                       var time = new Date();
                   }
                   var $tr, row = -1,
                odd;
                   // loop through the visible rows
                   $("tr:visible", table.tBodies[0]).each(function (i) {
                       $tr = $(this);
                       // style children rows the same way the parent
                       // row was styled
                       if (!$tr.hasClass(table.config.cssChildRow)) row++;
                       odd = (row % 2 == 0);
                       $tr.removeClass(
                table.config.widgetZebra.css[odd ? 0 : 1]).addClass(
                table.config.widgetZebra.css[odd ? 1 : 0])
                   });
                   if (table.config.debug) {
                       $.tablesorter.benchmark("Applying Zebra widget", time);
                   }
               }
           });
       })(jQuery);
  
   </script>
    <script language="javascript" type="text/javascript">
        $(document).ready
    (
    function () {

        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "WebService.asmx/y",
            data: null,
            dataType: "json",
            async: false,
            success: function (data) {
                for (var i = 0; i < data.d.length; i++)
                    $('#gv').append("<tr><td align=center><input type='checkbox' id='cb' class='s' /></td><td>" + data.d[i].EID + "</td><td>" + data.d[i].NAME + "</td></tr>");
            }
        });
        $('#gv').tablePagination({});

        $('#gv').tablesorter({

            headers: {
                0: { sorter: false }
            }

        });
        $('#btn').click(
        function (e) {
            var cnt = $("#gv input:checked").length;
            if (cnt < 1) {
                alert('Select atleast one checkbox');
                e.preventDefault();
            }
            else {
                var result = confirm('Do you want to delete selected record(s)?');
                if (result) {
                    return true;
                }
                else {
                    return false;
                };
            }

        });


        $('#tb').keyup(function (event) {
            event.preventDefault();
            var searchKey = $('#tb').val().toLowerCase();
            $("#gv tr td:nth-child(3)").each(function () {
            // here 3 is number of columns in the table.
                var cellText = $(this).text().toLowerCase();
                if (cellText.indexOf(searchKey) >= 0) {
                    $(this).parent().show();
                }
                else {
                    $(this).parent().hide();
                }
            });
        });


        $('#hcb').click(function () {

            if (this.checked)
                $('#gv input[type="checkbox"]').prop('checked', true);
            else
                $('#gv input[type="checkbox"]').prop('checked', false);

        });
        $('.s').click(function () {
            if ($(".s").length == $(".s:checked").length)
                $('#hcb').prop('checked', true);
            else
                $('#hcb').prop('checked', false);
        });
    }
    )
    </script>
</head>
<body>
    <form id="form1" runat="server">
     <asp:TextBox ID="tb" runat="server"></asp:TextBox><br />
    <div id="grid"  runat="server">
    <table border="1" cellpadding="0" cellspacing="0" id="gv" width="50%">
  <thead>
    <tr><td align="center"><input type="checkbox" id="hcb"  /></td><th>EID</th><th>NAME</th></tr>
  </thead>
    </table><br />
    <input type="button" id="btn" value="Delete" style="width:80px" />
    </div>
    </form>
</body>
</html>
page looks like :

No comments:

Post a Comment