Now able to show an empty message automatically when there are no rows.

Fixes #2 + option to show or hide the header when empty + added default style for the empty message. class name is jst-emptymessage + readme updated to reflect new options
reednj · Aug 28, 2011 · 9a0d49d · 9a0d49d
1 parent 780884a
commit 9a0d49d
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 15 deletions.
diff --git a/Docs/jsTable.md b/Docs/jsTable.md
@@ -15,6 +15,9 @@ jsTable Method: constructor {#InlineEditor:constructor}
 
 ### Options:
 
+* empty_message (string)	-	This message is show when there are no rows in the table. Styled using the class 'jst-emptymessage'
+* show_header_onempty (boolean)	-	should the table header be shown or hidden when the table is empty?
+
 ### Events:
 
 * onRowAdded(row_index, row_data)	- called after each row is added.
@@ -50,6 +53,18 @@ Empties the table. Does not remove the header.
 ### Example:
 	jst.clear();
 
+jsTable Method: setEmptyMessage {#InlineEditor:setEmptyMessage}
+-------------------------------------------------------------
+Set the mesage
+### Syntax:
+	jst.setEmptyMessage(empty_message, show_header)
+
+### Arguments:
+ * empty_message (string) - This message is show when there are no rows in the table. Styled using the class 'jst-emptymessage'
+ * show_header (boolean) - should the table header be shown or hidden when the table is empty?
+
+### Example:
+	jst.setEmptyMessage('table is empty', true);
 
 jsTable Method: addColumn {#InlineEditor:addColumn}
 -------------------------------------------------------------
@@ -68,7 +83,7 @@ empty the results can be unpredictable.
 
 jsTable Method: addColumns {#InlineEditor:addColumns}
 -------------------------------------------------------------
-Add multiple columns. 
+Add multiple columns.
 
 ### Syntax:
 	jst.addColumns(column_list);
@@ -94,10 +109,10 @@ Add a row to the bottom of the table.
 
 ### Example:
 	jst.addRow(
-		'1234', 
+		'1234',
-		'Nathan', 
+		'Nathan',
 		new Element('a', {
-			'href':'?id=1234', 
+			'href':'?id=1234',
 			'text':'profile'
 		})
 	);
@@ -117,7 +132,7 @@ Removes a row from the index provided.
 
 jsTable Method: deleteRowById {#InlineEditor:deleteRowById}
 -------------------------------------------------------------
-Removes a row from the table but by the internal row id, instead of the row index. This is 
+Removes a row from the table but by the internal row id, instead of the row index. This is
 useful for linking to events, as the ids do not change when rows are added or removed.
 
 ### Syntax:
@@ -171,7 +186,7 @@ Serializes the table to a javascript data structure.
 
 ### Example:
 	// returns an array like [12, 25, 36, 47, 58];
-	jst.toData('id'); 
+	jst.toData('id');
 
 	// returns something like [
 		{'id':12, 'firstname':'Nathan'},
@@ -181,7 +196,7 @@ Serializes the table to a javascript data structure.
 		{'id':58, 'firstname':'Samantha'},
 	]
 	//
-	jst.toData('id', 'firstname); 
+	jst.toData('id', 'firstname);
 
 jsTable Method: toJson {#InlineEditor:toJson}
 -------------------------------------------------------------

diff --git a/Source/jsTable.js b/Source/jsTable.js
@@ -25,9 +25,13 @@ var jsTable = new Class({
 		this.options.onRowDeleted = this.options.onRowDeleted || $empty;
 		this.options.onRowAdded = this.options.onRowAdded || $empty;
 		this.options.onCellUpdated = this.options.onCellUpdated || $empty;
+		this.options.empty_message = this.options.empty_message || null;
+		this.options.show_header_onempty = this.options.show_header_onempty || false;
 
+		this.table = null;
 		this.thead = null;
 		this.tbody = null;
+		this.empty_tr = null;
 
 		this.table_id = (Math.random() * 1000).round();
 
@@ -66,14 +70,48 @@ var jsTable = new Class({
 	_createTable: function() {
 		this.element.empty();
 
-		$e('table', {
+		this.table = $e('table', {
 			'class': 'jst-table',
 			'children':[
 				this.thead = $e('thead', {'children': [$e('tr')]}),
 				this.tbody = $e('tbody')
 			]
 		}).inject(this.element);
 
+		// if the empty message has been set, then create that element as well
+		if(this.options.empty_message != null) {
+			this._createEmptyMessage();
+		}
+
+	},
+
+	_createEmptyMessage: function() {
+		this.empty_tr = $e('div', {'class':'jst-emptymessage', 'text': this.options.empty_message});
+		this.element.grab(this.empty_tr);
+
+		// show we be showing the message or not?
+		this._setEmptyMessageVisibility();
+	},
+
+	_setEmptyMessageVisibility: function() {
+		if(this.empty_tr == null) {
+			return;
+		}
+
+		if(this.data.length > 0 && this.empty_tr.getStyle('display') != 'none') {
+			this.empty_tr.hide();
+
+			if(this.options.show_header_onempty !== true) {
+				this.thead.show();
+			}
+
+		} else if(this.data.length == 0 && this.empty_tr.getStyle('display') != '') {
+			this.empty_tr.show();
+
+			if(this.options.show_header_onempty!== true) {
+				this.thead.hide();
+			}
+		}
 	},
 
 	// does not include the head row.
@@ -91,6 +129,20 @@ var jsTable = new Class({
 		this.tbody.empty();
 	},
 
+	setEmptyMessage: function(empty_message, show_header) {
+		this.options.empty_message = empty_message;
+
+		if($defined(show_header)) {
+			this.options.show_header_onempty = show_header;
+		}
+
+		// if the empty message is not in the page yet, then create the
+		// element and add it to the page.
+		if(!$defined(this.empty_tr)) {
+			this._createEmptyMessage();
+		}
+	},
+
 	addColumns: function(columns) {
 		columns.each(function(col) {
 			this.addColumn(col.name, col.description);
@@ -143,6 +195,8 @@ var jsTable = new Class({
 		this.data.push(row_data);
 
 		this.options.onRowAdded(this.data.length-1, row_data);
+
+		this._setEmptyMessageVisibility();
 	},
 
 	deleteRow: function(row_index) {
@@ -160,6 +214,7 @@ var jsTable = new Class({
 
 		this.options.onRowDeleted(row_index, row_id);
 
+		this._setEmptyMessageVisibility();
 	},
 
 	deleteRowById: function(row_id) {
@@ -307,3 +362,9 @@ function $e(tag, props) {
 
    return new_element
 }
+
+// this is now implemented in mootool.more (finally!)
+Element.implement({
+   show: function() {this.setStyle('display','');},
+   hide: function() {this.setStyle('display','none');}
+});
diff --git a/Source/jstable-default.css b/Source/jstable-default.css
@@ -19,3 +19,8 @@
 	text-align: left;
 	padding: 3px 8px;
 }
+
+.jst-emptymessage {
+	text-align: center;
+	font-style: italic;
+}
diff --git a/Test/test.html b/Test/test.html
@@ -14,10 +14,14 @@
 	margin: 32px;
 }
 
-#t1 table {
+#t1 {
 	width: 500px;
 }
 
+#t1 table {
+	width: 100%;
+}
+
 #t-status {
 	float: right;
 	padding: 14px;
@@ -42,19 +46,23 @@
 		this.jst = new jsTable('t1', {
 			'onRowDeleted': this.deleted,
 			'onRowAdded': this.added,
-			'onCellUpdated': this.updated
+			'onCellUpdated': this.updated,
+			'empty_message': 'Click the buttons above to add some rows'
 		});
+
 		var jst = this.jst;
 
 		jst.addColumn('id', 'id');
 		jst.addColumn('desc', 'Description');
 		jst.addColumn('button', 'delete');
 
+		//jst.setEmptyMessage('empty table', true);
+
 		for(i=0; i < 10; i++) {
 			var id = (Math.random() * 100).round();
 
 			jst.addRow(
-				id, 
+				id,
 				'description-' + id,
 				$e('a', {
 					'text':'x',
@@ -76,6 +84,10 @@
 		$('t-status').innerHTML = 'Complete';
 	},
 
+	add_row: function() {
+		this.jst.addRow(this.jst.rowCount(), Math.random(), '');
+	},
+
 	delete_row: function() {
 		this.jst.deleteRow(3);
 	},
@@ -105,8 +117,8 @@
 <body>
 
 <div id='t-body'>
-	
+
-	
+
 	<div id='t-status'>FAIL</div>
 	<div class='clear'></div>
 
@@ -116,6 +128,7 @@
 		<div>
 			<input type='button' value='delete' onclick='Ui.delete_row.bind(Ui)()'>
 			<input type='button' value='delete last' onclick='Ui.delete_last.bind(Ui)()'>
+			<input type='button' value='add row' onclick='Ui.add_row.bind(Ui)()'>
 		</div>
 
 		<div>
@@ -128,9 +141,9 @@
 			<span>update: </span> <span id='s2'> </span>
 			<span>adds: </span> <span id='s3'> </span>
 		</div>
-		
+
 		<div>
-			<span>get cell by column_id:</span> 
+			<span>get cell by column_id:</span>
 			<span id='r2'></span>
 		</div>