// Example: Row Grouping Tags // $(document).ready(function() { // $('table.sortable tbody tr:odd').addClass('odd'); // $('table.sortable tbody tr:even').addClass('even'); // }); // Example: Basic Alphabetical Sorting // Step 1 // $(document).ready(function() { // $('table.sortable').each(function() { // var $table = $(this); // $('th', $table).each(function(column) { // var $header = $(this); // if ($header.is('.sort-alpha')) { // $header.addClass('clickable').hover(function() { // $header.addClass('hover'); // }, function() { // $header.removeClass('hover'); // }).click(function() { // var rows = $table.find('tbody > tr').get(); // rows.sort(function(a, b) { // var keyA = $(a).children('td').eq(column).text() // .toUpperCase(); // var keyB = $(b).children('td').eq(column).text() // .toUpperCase(); // if (keyA < keyB) return -1; // if (keyA > keyB) return 1; // return 0; // }); // $.each(rows, function(index, row) { // $table.children('tbody').append(row); // }); // }); // } // }); // }); // }); // Step 2 // $(document).ready(function() { // var alternateRowColors = function($table) { // $('tbody tr:odd', $table) // .removeClass('even').addClass('odd'); // $('tbody tr:even', $table) // .removeClass('odd').addClass('even'); // }; // // $('table.sortable').each(function() { // var $table = $(this); // alternateRowColors($table); // $('th', $table).each(function(column) { // var $header = $(this); // if ($header.is('.sort-alpha')) { // $header.addClass('clickable').hover(function() { // $header.addClass('hover'); // }, function() { // $header.removeClass('hover'); // }).click(function() { // var rows = $table.find('tbody > tr').get(); // rows.sort(function(a, b) { // var keyA = $(a).children('td').eq(column).text() // .toUpperCase(); // var keyB = $(b).children('td').eq(column).text() // .toUpperCase(); // if (keyA < keyB) return -1; // if (keyA > keyB) return 1; // return 0; // }); // $.each(rows, function(index, row) { // $table.children('tbody').append(row); // }); // alternateRowColors($table); // }); // } // }); // }); // }); // Example: Refactoring the row striping code as a plug-in method // jQuery.fn.alternateRowColors = function() { // $('tbody tr:odd', this) // .removeClass('even').addClass('odd'); // $('tbody tr:even', this) // .removeClass('odd').addClass('even'); // return this; // }; // // $(document).ready(function() { // $('table.sortable').each(function() { // var $table = $(this); // $table.alternateRowColors(); // $('th', $table).each(function(column) { // var $header = $(this); // if ($header.is('.sort-alpha')) { // $header.addClass('clickable').hover(function() { // $header.addClass('hover'); // }, function() { // $header.removeClass('hover'); // }).click(function() { // var rows = $table.find('tbody > tr').get(); // rows.sort(function(a, b) { // var keyA = $(a).children('td').eq(column).text() // .toUpperCase(); // var keyB = $(b).children('td').eq(column).text() // .toUpperCase(); // if (keyA < keyB) return -1; // if (keyA > keyB) return 1; // return 0; // }); // $.each(rows, function(index, row) { // $table.children('tbody').append(row); // }); // $table.alternateRowColors(); // }); // } // }); // }); // }); // Example: Improving sort performance using expando properties // jQuery.fn.alternateRowColors = function() { // $('tbody tr:odd', this) // .removeClass('even').addClass('odd'); // $('tbody tr:even', this) // .removeClass('odd').addClass('even'); // return this; // }; // // $(document).ready(function() { // $('table.sortable').each(function() { // var $table = $(this); // $table.alternateRowColors(); // $('th', $table).each(function(column) { // var $header = $(this); // if ($header.is('.sort-alpha')) { // $header.addClass('clickable').hover(function() { // $header.addClass('hover'); // }, function() { // $header.removeClass('hover'); // }).click(function() { // var rows = $table.find('tbody > tr').get(); // $.each(rows, function(index, row) { // row.sortKey = $(row).children('td').eq(column) // .text().toUpperCase(); // }); // rows.sort(function(a, b) { // if (a.sortKey < b.sortKey) return -1; // if (a.sortKey > b.sortKey) return 1; // return 0; // }); // $.each(rows, function(index, row) { // $table.children('tbody').append(row); // row.sortKey = null; // }); // $table.alternateRowColors(); // }); // } // }); // }); // }); // Example: Explicitly marking sort keys // jQuery.fn.alternateRowColors = function() { // $('tbody tr:odd', this) // .removeClass('even').addClass('odd'); // $('tbody tr:even', this) // .removeClass('odd').addClass('even'); // return this; // }; // // $(document).ready(function() { // $('table.sortable').each(function() { // var $table = $(this); // $table.alternateRowColors(); // $('th', $table).each(function(column) { // var $header = $(this); // if ($header.is('.sort-alpha')) { // $header.addClass('clickable').hover(function() { // $header.addClass('hover'); // }, function() { // $header.removeClass('hover'); // }).click(function() { // var rows = $table.find('tbody > tr').get(); // $.each(rows, function(index, row) { // var $cell = $(row).children('td').eq(column); // row.sortKey = $cell.find('.sort-key').text() // .toUpperCase() + ' ' // + $cell.text().toUpperCase(); // }); // rows.sort(function(a, b) { // if (a.sortKey < b.sortKey) return -1; // if (a.sortKey > b.sortKey) return 1; // return 0; // }); // $.each(rows, function(index, row) { // $table.children('tbody').append(row); // row.sortKey = null; // }); // $table.alternateRowColors(); // }); // } // }); // }); // }); // Example: Sorting by other types of data // jQuery.fn.alternateRowColors = function() { // $('tbody tr:odd', this) // .removeClass('even').addClass('odd'); // $('tbody tr:even', this) // .removeClass('odd').addClass('even'); // return this; // }; // // $(document).ready(function() { // $('table.sortable').each(function() { // var $table = $(this); // $table.alternateRowColors(); // $('th', $table).each(function(column) { // var $header = $(this); // var findSortKey; // if ($header.is('.sort-alpha')) { // findSortKey = function($cell) { // return $cell.find('.sort-key').text().toUpperCase() // + ' ' + $cell.text().toUpperCase(); // }; // } // else if ($header.is('.sort-numeric')) { // findSortKey = function($cell) { // var key = $cell.text().replace(/^[^\d.]*/, ''); // key = parseFloat(key); // return isNaN(key) ? 0 : key; // }; // } // else if ($header.is('.sort-date')) { // findSortKey = function($cell) { // return Date.parse('1 ' + $cell.text()); // }; // } // // if (findSortKey) { // $header.addClass('clickable').hover(function() { // $header.addClass('hover'); // }, function() { // $header.removeClass('hover'); // }).click(function() { // var rows = $table.find('tbody > tr').get(); // $.each(rows, function(index, row) { // var $cell = $(row).children('td').eq(column); // row.sortKey = findSortKey($cell); // }); // rows.sort(function(a, b) { // if (a.sortKey < b.sortKey) return -1; // if (a.sortKey > b.sortKey) return 1; // return 0; // }); // $.each(rows, function(index, row) { // $table.children('tbody').append(row); // row.sortKey = null; // }); // $table.alternateRowColors(); // }); // } // }); // }); // }); // Example: Column highlighting // jQuery.fn.alternateRowColors = function() { // $('tbody tr:odd', this) // .removeClass('even').addClass('odd'); // $('tbody tr:even', this) // .removeClass('odd').addClass('even'); // return this; // }; // // $(document).ready(function() { // $('table.sortable').each(function() { // var $table = $(this); // $table.alternateRowColors(); // $('th', $table).each(function(column) { // var $header = $(this); // var findSortKey; // if ($header.is('.sort-alpha')) { // findSortKey = function($cell) { // return $cell.find('.sort-key').text().toUpperCase() // + ' ' + $cell.text().toUpperCase(); // }; // } // else if ($header.is('.sort-numeric')) { // findSortKey = function($cell) { // var key = $cell.text().replace(/^[^\d.]*/, ''); // key = parseFloat(key); // return isNaN(key) ? 0 : key; // }; // } // else if ($header.is('.sort-date')) { // findSortKey = function($cell) { // return Date.parse('1 ' + $cell.text()); // }; // } // // if (findSortKey) { // $header.addClass('clickable').hover(function() { // $header.addClass('hover'); // }, function() { // $header.removeClass('hover'); // }).click(function() { // var rows = $table.find('tbody > tr').get(); // $.each(rows, function(index, row) { // var $cell = $(row).children('td').eq(column); // row.sortKey = findSortKey($cell); // }); // rows.sort(function(a, b) { // if (a.sortKey < b.sortKey) return -1; // if (a.sortKey > b.sortKey) return 1; // return 0; // }); // $.each(rows, function(index, row) { // $table.children('tbody').append(row); // row.sortKey = null; // }); // $table.find('td').removeClass('sorted') // .filter(':nth-child(' + (column + 1) + ')') // .addClass('sorted'); // $table.alternateRowColors(); // }); // } // }); // }); // }); // Example: Alternating sort directions // jQuery.fn.alternateRowColors = function() { // $('tbody tr:odd', this) // .removeClass('even').addClass('odd'); // $('tbody tr:even', this) // .removeClass('odd').addClass('even'); // return this; // }; // // $(document).ready(function() { // $('table.sortable').each(function() { // var $table = $(this); // $table.alternateRowColors(); // $('th', $table).each(function(column) { // var $header = $(this); // var findSortKey; // if ($header.is('.sort-alpha')) { // findSortKey = function($cell) { // return $cell.find('.sort-key').text().toUpperCase() // + ' ' + $cell.text().toUpperCase(); // }; // } // else if ($header.is('.sort-numeric')) { // findSortKey = function($cell) { // var key = $cell.text().replace(/^[^\d.]*/, ''); // key = parseFloat(key); // return isNaN(key) ? 0 : key; // }; // } // else if ($header.is('.sort-date')) { // findSortKey = function($cell) { // return Date.parse('1 ' + $cell.text()); // }; // } // // if (findSortKey) { // $header.addClass('clickable').hover(function() { // $header.addClass('hover'); // }, function() { // $header.removeClass('hover'); // }).click(function() { // var sortDirection = 1; // if ($header.is('.sorted-asc')) { // sortDirection = -1; // } // var rows = $table.find('tbody > tr').get(); // $.each(rows, function(index, row) { // var $cell = $(row).children('td').eq(column); // row.sortKey = findSortKey($cell); // }); // rows.sort(function(a, b) { // if (a.sortKey < b.sortKey) return -sortDirection; // if (a.sortKey > b.sortKey) return sortDirection; // return 0; // }); // $.each(rows, function(index, row) { // $table.children('tbody').append(row); // row.sortKey = null; // }); // $table.find('th').removeClass('sorted-asc') // .removeClass('sorted-desc'); // if (sortDirection == 1) { // $header.addClass('sorted-asc'); // } // else { // $header.addClass('sorted-desc'); // } // $table.find('td').removeClass('sorted') // .filter(':nth-child(' + (column + 1) + ')') // .addClass('sorted'); // $table.alternateRowColors(); // }); // } // }); // }); // }); // Example: JavaScript pagination // Step 1 // $(document).ready(function() { // $('table.paginated').each(function() { // var currentPage = 0; // var numPerPage = 10; // var $table = $(this); // // $table.find('tbody tr').hide() // .slice(currentPage * numPerPage, // (currentPage + 1) * numPerPage) // .show(); // }); // }); // Step 2 // $(document).ready(function() { // $('table.paginated').each(function() { // var currentPage = 0; // var numPerPage = 10; // var $table = $(this); // // var numRows = $table.find('tbody tr').length; // var numPages = Math.ceil(numRows / numPerPage); // // var $pager = $('
'); // for (var page = 0; page < numPages; page++) { // $('' + (page + 1) + '') // .appendTo($pager).addClass('clickable'); // } // $pager.insertBefore($table); // // $table.find('tbody tr').hide() // .slice(currentPage * numPerPage, // (currentPage + 1) * numPerPage) // .show(); // }); // }); // Step 3 // $(document).ready(function() { // $('table.paginated').each(function() { // var currentPage = 0; // var numPerPage = 10; // var $table = $(this); // var repaginate = function() { // $table.find('tbody tr').hide() // .slice(currentPage * numPerPage, // (currentPage + 1) * numPerPage) // .show(); // }; // var numRows = $table.find('tbody tr').length; // var numPages = Math.ceil(numRows / numPerPage); // var $pager = $(''); // for (var page = 0; page < numPages; page++) { // $('').text(page + 1) // .click(function() { // currentPage = page; // repaginate(); // }).appendTo($pager).addClass('clickable'); // } // $pager.insertBefore($table); // }); // }); // Step 4 // $(document).ready(function() { // $('table.paginated').each(function() { // var currentPage = 0; // var numPerPage = 10; // var $table = $(this); // var repaginate = function() { // $table.find('tbody tr').hide() // .slice(currentPage * numPerPage, // (currentPage + 1) * numPerPage) // .show(); // }; // var numRows = $table.find('tbody tr').length; // var numPages = Math.ceil(numRows / numPerPage); // var $pager = $(''); // for (var page = 0; page < numPages; page++) { // $('').text(page + 1) // .bind('click', {newPage: page}, function(event) { // currentPage = event.data['newPage']; // repaginate(); // }).appendTo($pager).addClass('clickable'); // } // $pager.insertBefore($table); // }); // }); // Step 5 // $(document).ready(function() { // $('table.paginated').each(function() { // var currentPage = 0; // var numPerPage = 10; // var $table = $(this); // var repaginate = function() { // $table.find('tbody tr').hide() // .slice(currentPage * numPerPage, // (currentPage + 1) * numPerPage) // .show(); // }; // var numRows = $table.find('tbody tr').length; // var numPages = Math.ceil(numRows / numPerPage); // var $pager = $(''); // for (var page = 0; page < numPages; page++) { // $('').text(page + 1) // .bind('click', {newPage: page}, function(event) { // currentPage = event.data['newPage']; // repaginate(); // $(this).addClass('active') // .siblings().removeClass('active'); // }).appendTo($pager).addClass('clickable'); // } // $pager.insertBefore($table) // .find('span.page-number:first').addClass('active'); // }); // }); // Finished code: Sorting and Paging jQuery.fn.alternateRowColors = function() { $('tbody tr:odd', this) .removeClass('even').addClass('odd'); $('tbody tr:even', this) .removeClass('odd').addClass('even'); return this; }; $(document).ready(function() { $('table.sortable').each(function() { var $table = $(this); $table.alternateRowColors(); $('th', $table).each(function(column) { var $header = $(this); var findSortKey; if ($header.is('.sort-alpha')) { findSortKey = function($cell) { return $cell.find('.sort-key').text().toUpperCase() + ' ' + $cell.text().toUpperCase(); }; } else if ($header.is('.sort-numeric')) { findSortKey = function($cell) { var key = $cell.text().replace(/^[^\d.]*/, ''); key = parseFloat(key); return isNaN(key) ? 0 : key; }; } else if ($header.is('.sort-date')) { findSortKey = function($cell) { return Date.parse('1 ' + $cell.text()); }; } if (findSortKey) { $header.addClass('clickable').hover(function() { $header.addClass('hover'); }, function() { $header.removeClass('hover'); }).click(function() { var sortDirection = 1; if ($header.is('.sorted-asc')) { sortDirection = -1; } var rows = $table.find('tbody > tr').get(); $.each(rows, function(index, row) { var $cell = $(row).children('td').eq(column); row.sortKey = findSortKey($cell); }); rows.sort(function(a, b) { if (a.sortKey < b.sortKey) return -sortDirection; if (a.sortKey > b.sortKey) return sortDirection; return 0; }); $.each(rows, function(index, row) { $table.children('tbody').append(row); row.sortKey = null; }); $table.find('th').removeClass('sorted-asc') .removeClass('sorted-desc'); if (sortDirection == 1) { $header.addClass('sorted-asc'); } else { $header.addClass('sorted-desc'); } $table.find('td').removeClass('sorted') .filter(':nth-child(' + (column + 1) + ')') .addClass('sorted'); $table.alternateRowColors(); $table.trigger('repaginate'); }); } }); }); }); $(document).ready(function() { $('table.paginated').each(function() { var currentPage = 0; var numPerPage = 10; var $table = $(this); $table.bind('repaginate', function() { $table.find('tbody tr').hide() .slice(currentPage * numPerPage, (currentPage + 1) * numPerPage) .show(); }); var numRows = $table.find('tbody tr').length; var numPages = Math.ceil(numRows / numPerPage); var $pager = $(''); for (var page = 0; page < numPages; page++) { $('').text(page + 1) .bind('click', {newPage: page}, function(event) { currentPage = event.data['newPage']; $table.trigger('repaginate'); $(this).addClass('active') .siblings().removeClass('active'); }).appendTo($pager).addClass('clickable'); } $pager.insertBefore($table) .find('span.page-number:first').addClass('active'); }); }); // Example: Row striping // Step 1 // $(document).ready(function() { // $('table.striped tr:odd').addClass('odd'); // $('table.striped tr:even').addClass('even'); // }); // Step 2 // $(document).ready(function() { // $('table.striped tr:nth-child(odd)').addClass('odd'); // $('table.striped tr:nth-child(even)').addClass('even'); // }); // Step 3 // $(document).ready(function() { // $('table.striped tr:not(:has(th)):odd').addClass('odd'); // $('table.striped tr:not(:has(th)):even').addClass('even'); // }); // Step 4 // $(document).ready(function() { // $('table.striped tbody').each(function() { // $(this).find('tr:not(:has(th)):odd').addClass('odd'); // $(this).find('tr:not(:has(th)):even').addClass('even'); // }); // }); // Example: Advanced row striping // Step 1 // $(document).ready(function() { // $('table.striped tbody').each(function() { // $(this).find('tr:not(:has(th))').filter(function(index) { // return (index % 6) < 3; // }).addClass('odd'); // }); // }); // Step 2 // $(document).ready(function() { // $('table.striped tbody').each(function() { // $(this).find('tr:not(:has(th))').addClass('even') // .filter(function(index) { // return (index % 6) < 3; // }).removeClass('even').addClass('odd'); // }); // }); // Example: Interactive row highlighting // Step 1 // $(document).ready(function() { // var $authorCells = $('table.striped td:nth-child(3)'); // $authorCells.click(function() { // // Perform our highlighting here. // }); // }); // Step 2 // $(document).ready(function() { // var $authorCells = $('table.striped td:nth-child(3)'); // $authorCells.click(function() { // var authorName = $(this).text(); // $authorCells.each(function(index) { // if (authorName == $(this).text()) { // $(this).parent().toggleClass('highlight'); // }; // }); // }); // }); // Step 3 // $(document).ready(function() { // var $authorCells = $('table.striped td:nth-child(3)'); // $authorCells.click(function() { // var authorName = $(this).text(); // $authorCells.each(function(index) { // if (authorName == $(this).text()) { // $(this).parent().toggleClass('highlight'); // } // else { // $(this).parent().removeClass('highlight'); // } // }); // }); // }); // Example: Tooltips // Step 1, highlight author rows // $(document).ready(function() { // var $authorCells = $('table.striped td:nth-child(3)'); // $authorCells // .addClass('clickable') // .click(function() { // var authorName = $(this).text(); // $authorCells.each(function(index) { // if (authorName == $(this).text()) { // $(this).parent().toggleClass('highlight'); // } // else { // $(this).parent().removeClass('highlight'); // } // }); // }); // }); // Step 2 // $(document).ready(function() { // var $authorCells = $('table.striped td:nth-child(3)'); // var $tooltip = $('').appendTo('body'); // // var positionTooltip = function(event) { // var tPosX = event.pageX; // var tPosY = event.pageY + 20; // $tooltip.css({top: tPosY, left: tPosX}); // }; // var showTooltip = function(event) { // var authorName = $(this).text(); // $tooltip // .text('Highlight all articles by ' + authorName) // .show(); // positionTooltip(event); // }; // var hideTooltip = function() { // $tooltip.hide(); // }; // // $authorCells // .addClass('clickable') // .hover(showTooltip, hideTooltip) // .mousemove(positionTooltip) // .click(function(event) { // var authorName = $(this).text(); // $authorCells.each(function(index) { // if (authorName == $(this).text()) { // $(this).parent().toggleClass('highlight'); // } // else { // $(this).parent().removeClass('highlight'); // } // }); // }); // }); // Step 3 // $(document).ready(function() { // var $authorCells = $('table.striped td:nth-child(3)'); // var $tooltip = $('').appendTo('body'); // // var positionTooltip = function(event) { // var tPosX = event.pageX; // var tPosY = event.pageY + 20; // $tooltip.css({top: tPosY, left: tPosX}); // }; // var showTooltip = function(event) { // var authorName = $(this).text(); // var action = 'Highlight'; // if ($(this).parent().is('.highlight')) { // action = 'Unhighlight'; // } // $tooltip // .text(action + ' all articles by ' + authorName) // .show(); // positionTooltip(event); // }; // var hideTooltip = function() { // $tooltip.hide(); // }; // // $authorCells // .addClass('clickable') // .hover(showTooltip, hideTooltip) // .mousemove(positionTooltip) // .click(function(event) { // var authorName = $(this).text(); // $authorCells.each(function(index) { // if (authorName == $(this).text()) { // $(this).parent().toggleClass('highlight'); // } // else { // $(this).parent().removeClass('highlight'); // } // }); // showTooltip.call(this, event); // }); // }); // Example: Collapsing and Expanding // $(document).ready(function() { // var collapseIcon = '../images/bullet_toggle_minus.png'; // var collapseText = 'Collapse this section'; // var expandIcon = '../images/bullet_toggle_plus.png'; // var expandText = 'Expand this section'; // $('table.collapsible tbody').each(function() { // var $section = $(this); // $('