Merge pull request #5854 from jquery/table-refresh-1.3

Table refresh method for 1.3.x. Fixes #5841 and fixes #5842.

js/widgets/table.columntoggle.js

@@ -34,26 +34,29 @@ $.mobile.table.prototype.options.classes = $.extend(
 	}
 );
 
-$.mobile.document.delegate( ":jqmData(role='table')", "tablecreate", function() {
-
+$.mobile.document.delegate( ":jqmData(role='table')", "tablecreate refresh", function( e ) {
+	
 	var $table = $( this ),
 		self = $table.data( "mobile-table" ),
+		event = e.type,
 		o = self.options,
-		ns = $.mobile.ns;
+		ns = $.mobile.ns,
+		id = ( $table.attr( "id" ) || o.classes.popup ) + "-popup"; //TODO BETTER FALLBACK ID HERE
 
 	if( o.mode !== "columntoggle" ){
 		return;
 	}
 
-	self.element.addClass( o.classes.columnToggleTable );
+	if ( event !== "refresh" ) {
+		self.element.addClass( o.classes.columnToggleTable );
 
-	var id = ( $table.attr( "id" ) || o.classes.popup ) + "-popup", //TODO BETTER FALLBACK ID HERE
-		$menuButton = $( "<a href='#" + id + "' class='" + o.classes.columnBtn + "' data-" + ns + "rel='popup' data-" + ns + "mini='true'>" + o.columnBtnText + "</a>" ),
-		$popup = $( "<div data-" + ns + "role='popup' data-" + ns + "role='fieldcontain' class='" + o.classes.popup + "' id='" + id + "'></div>"),
-		$menu = $("<fieldset data-" + ns + "role='controlgroup'></fieldset>");
+		var $menuButton = $( "<a href='#" + id + "' class='" + o.classes.columnBtn + "' data-" + ns + "rel='popup' data-" + ns + "mini='true'>" + o.columnBtnText + "</a>" ),
+			$popup = $( "<div data-" + ns + "role='popup' data-" + ns + "role='fieldcontain' class='" + o.classes.popup + "' id='" + id + "'></div>"),
+			$menu = $("<fieldset data-" + ns + "role='controlgroup'></fieldset>");
+	}
 
 	// create the hide/show toggles
-	self.headers.not( "td" ).each(function(){
+	self.headers.not( "td" ).each(function( i ){
 
 		var priority = $( this ).jqmData( "priority" ),
 			$cells = $( this ).add( $( this ).jqmData( "cells" ) );
@@ -62,48 +65,68 @@ $.mobile.document.delegate( ":jqmData(role='table')", "tablecreate", function()
 
 			$cells.addClass( o.classes.priorityPrefix + priority );
 
-			$("<label><input type='checkbox' checked />" + $( this ).text() + "</label>" )
-				.appendTo( $menu )
-				.children( 0 )
-				.jqmData( "cells", $cells )
-				.checkboxradio({
-					theme: o.columnPopupTheme
-				});
+			if ( event !== "refresh" ) {
+				$("<label><input type='checkbox' checked />" + $( this ).text() + "</label>" )
+					.appendTo( $menu )
+					.children( 0 )
+					.jqmData( "cells", $cells )
+					.checkboxradio({
+						theme: o.columnPopupTheme
+					});
+			} else {
+				$('#' + id + ' fieldset div:eq(' + i +')').find('input').jqmData("cells", $cells)
+			}
 		}
 	});
+	if ( event !== "refresh" ) {
 		$menu.appendTo( $popup );
+	}
 
 	// bind change event listeners to inputs - TODO: move to a private method?
-	$menu.on( "change", "input", function( e ){
-		if( this.checked ){
-			$( this ).jqmData( "cells" ).removeClass( "ui-table-cell-hidden" ).addClass( "ui-table-cell-visible" );
-		}
-		else {
-			$( this ).jqmData( "cells" ).removeClass( "ui-table-cell-visible" ).addClass( "ui-table-cell-hidden" );
-		}
-	});
+	if ( $menu === undefined ) {
+		$switchboard = $('#' + id + ' fieldset');
+	} else {
+		$switchboard = $menu;
+	}
 
-	$menuButton
-		.insertBefore( $table )
-		.buttonMarkup({
-			theme: o.columnBtnTheme
+	if (event !== "refresh") {
+		$switchboard.on( "change", "input", function( e ){
+			if( this.checked ){
+				$( this ).jqmData( "cells" ).removeClass( "ui-table-cell-hidden" ).addClass( "ui-table-cell-visible" );
+			} else {
+				$( this ).jqmData( "cells" ).removeClass( "ui-table-cell-visible" ).addClass( "ui-table-cell-hidden" );
+			}
 		});
 
-	$popup
-		.insertBefore( $table )
-		.popup();
+		$menuButton
+			.insertBefore( $table )
+			.buttonMarkup({
+				theme: o.columnBtnTheme
+			});
+
+		$popup
+			.insertBefore( $table )
+			.popup();
+	}
 
 	// refresh method
-	self.refresh = function(){
-		$menu.find( "input" ).each( function(){
-			this.checked = $( this ).jqmData( "cells" ).eq(0).css( "display" ) === "table-cell";
+	self.update = function(){
+		$switchboard.find( "input" ).each( function(){
+			if (this.checked) {
+				this.checked = $( this ).jqmData( "cells" ).eq(0).css( "display" ) === "table-cell";
+				if (event === "refresh") {
+					$( this ).jqmData( "cells" ).addClass('ui-table-cell-visible');
+				}
+			} else {
+				$( this ).jqmData( "cells" ).addClass('ui-table-cell-hidden');
+			}
 			$( this ).checkboxradio( "refresh" );
 		});
 	};
 
-	$.mobile.window.on( "throttledresize", self.refresh );
+	$.mobile.window.on( "throttledresize", self.update );
 
-	self.refresh();
+	self.update();
 
 });
 

js/widgets/table.js

@@ -19,11 +19,17 @@ $.widget( "mobile.table", $.mobile.widget, {
 		},
 
 		_create: function() {
+			var self = this;
+			self.refresh( true );
+		},
 
+		refresh: function (create) {
 			var self = this,
 				trs = this.element.find( "thead tr" );
 
-			this.element.addClass( this.options.classes.table );
+			if ( create ) {
+				this.element.addClass( this.options.classes.table );
+			}
 
 			// Expose headers and allHeaders properties on the widget
 			// headers references the THs within the first TR in the table
@@ -40,7 +46,6 @@ $.widget( "mobile.table", $.mobile.widget, {
 
 					var span = parseInt( $( this ).attr( "colspan" ), 10 ),
 						sel = ":nth-child(" + ( coltally + 1 ) + ")";
-					
 					$( this )
 						.jqmData( "colstart", coltally + 1 );
 
@@ -51,6 +56,9 @@ $.widget( "mobile.table", $.mobile.widget, {
 						}
 					}
 
+					if ( create === undefined ) {
+						$(this).jqmData("cells", "");
+					}
 					// Store "cells" data on header as a reference to all cells in the same column as this TH
 					$( this )
 						.jqmData( "cells", self.element.find( "tr" ).not( trs.eq(0) ).not( this ).children( sel ) );
@@ -61,6 +69,10 @@ $.widget( "mobile.table", $.mobile.widget, {
 
 			});
 
+			// update table modes
+			if ( create === undefined ) {
+				this.element.trigger( 'refresh' );
+			}
 	}
 
 });

js/widgets/table.reflow.js

@@ -19,9 +19,10 @@ $.mobile.table.prototype.options.classes = $.extend(
 	}
 );
 
-$.mobile.document.delegate( ":jqmData(role='table')", "tablecreate", function() {
+$.mobile.document.delegate( ":jqmData(role='table')", "tablecreate refresh", function( e ) {
 
 	var $table = $( this ),
+		event = e.type,
 		self = $table.data( "mobile-table" ),
 		o = self.options;
 
@@ -30,13 +31,15 @@ $.mobile.document.delegate( ":jqmData(role='table')", "tablecreate", function()
 		return;
 	}
 
-	self.element.addClass( o.classes.reflowTable );
+	if ( event !== "refresh" ) {
+		self.element.addClass( o.classes.reflowTable );
+	}
 
 	// get headers in reverse order so that top-level headers are appended last
 	var reverseHeaders =  $( self.allHeaders.get().reverse() );
 
 	// create the hide/show toggles
-	reverseHeaders.each(function(i){
+	reverseHeaders.each(function( i ){
 		var $cells = $( this ).jqmData( "cells" ),
 			colstart = $( this ).jqmData( "colstart" ),
 			hierarchyClass = $cells.not( this ).filter( "thead th" ).length && " ui-table-cell-label-top",

tests/unit/table/index.html

@@ -33,6 +33,18 @@
 	<link rel="stylesheet" href="../../../external/qunit.css"/>
 
 	<script src="../swarminject.js"></script>
+	
+	<script type="text/javascript">
+		$(window).on('refresh_test_table', function (e, data) {
+			var tb = $(data).find('tbody'),
+					newRow = '<tr><th data-test="abc">1</th><td>2</td><td>3</td><td data-col="3">4</td><td>5</td></tr>';
+			tb.empty()
+				.append(newRow)
+				.closest('table')
+				.table('refresh');
+		});
+	</script>
+
 </head>
 <body>
 
@@ -51,11 +63,11 @@ <h1>Basic Table</h1>
 		<table data-nstest-role="table" id="movie-table">
 			<thead>
 				<tr>
-					<th data-priority="1">Rank</th>
-					<th data-priority="persist">Movie Title</th>
-					<th data-priority="2">Year</th>
-					<th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
-					<th data-priority="4">Reviews</th>
+					<th data-nstest-priority="1">Rank</th>
+					<th data-nstest-priority="persist">Movie Title</th>
+					<th data-nstest-priority="2">Year</th>
+					<th data-nstest-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
+					<th data-nstest-priority="4">Reviews</th>
 				</tr>
 			</thead>
 			<tbody>
@@ -78,11 +90,11 @@ <h1>Basic Table</h1>
 		<table data-nstest-role="table" data-nstest-mode="reflow" id="movie-table-reflow">
 			<thead>
 				<tr>
-					<th data-priority="1">Rank</th>
-					<th data-priority="persist">Movie Title</th>
-					<th data-priority="2">Year</th>
-					<th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
-					<th data-priority="4">Reviews</th>
+					<th data-nstest-priority="1">Rank</th>
+					<th data-nstest-priority="persist">Movie Title</th>
+					<th data-nstest-priority="2">Year</th>
+					<th data-nstest-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
+					<th data-nstest-priority="4">Reviews</th>
 				</tr>
 			</thead>
 			<tbody>