Friday 26 July 2013
Thursday 25 July 2013
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 :
<!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 :
Subscribe to:
Posts (Atom)