How To Create a Responsive Table Using jQuery
erics, Posted April 19th, 2013 at 10:55:11am
The jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
jQuery(document).ready(function() { function watchWindow() { var resizeTimer; $(window).on('resize', function() { clearTimeout(resizeTimer); resizeTimer = setTimeout(sizeTable(), 500); }); } function sizeTable() { var Mine = {}; // calculate the proper number of columns to fit in the available space Mine.maxColumns = 5; Mine.columnWidth = 232; Mine.tableWidth = jQuery('#Table-tiles').width(); Mine.windowWidth = jQuery(window).width(); //alert('Table: ' + Mine.tableWidth + ', Window: ' + Mine.windowWidth); Mine.columns = parseInt(Mine.windowWidth / Mine.columnWidth); if (Mine.columns < 1) { Mine.columns = 1; } if (Mine.columns > Mine.maxColumns) { Mine.columns = Mine.maxColumns; } //alert('Columns: ' + Mine.columns); // hide or show the columns for (var i = 1; i < 6; i++) { if (i > Mine.columns) { jQuery('#column-'+i).hide(); } else { jQuery('#column-'+i).show(); } } }; sizeTable(); watchWindow(); }); |
The HTML
|
1 2 3 4 5 6 7 8 9 |
<table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto; " id="Table-tiles" class=""> <tr> <td id="column-1">{$columns.1}</td> <td id="column-2">{$columns.2}</td> <td id="column-3">{$columns.3}</td> <td id="column-4">{$columns.4}</td> <td id="column-5">{$columns.5}</td> </tr> </table> |
Categories: How-To's, Technology JQuery, Responsive, Table
Leave Your Comment
All fields marked with "*" are required.