diff --git a/application/views/scripts/nowplaying/index.phtml b/application/views/scripts/nowplaying/index.phtml
index e06b49810..e8b101dc0 100644
--- a/application/views/scripts/nowplaying/index.phtml
+++ b/application/views/scripts/nowplaying/index.phtml
@@ -1,4 +1,5 @@
 <div class="button-bar-top">
     <a href="javascript:void(0)" class="toggle-button-active end-button" id="now_view">Now View</a><a href="javascript:void(0)" class="toggle-button" id="day_view">Day View</a>
 </div>
-<div id='demo'></div>
+<table cellpadding="0" cellspacing="0" border="0" class="datatable" id="nowplayingtable"></table>
+<!--<div id='demo'></div>-->
diff --git a/public/js/playlist/nowplayingdatagrid.js b/public/js/playlist/nowplayingdatagrid.js
index ce65d2a00..def9dd460 100644
--- a/public/js/playlist/nowplayingdatagrid.js
+++ b/public/js/playlist/nowplayingdatagrid.js
@@ -1,5 +1,5 @@
 var registered = false;
-var datagridData;
+var datagridData = null;
 
 function getDateText(obj){
 	var str = obj.aData[ obj.iDataColumn ].toString();
@@ -42,52 +42,21 @@ function notifySongEnd(){
 		}
 	}
 	
-	createDataGrid();
+	updateDataTable();
 }
 
-    var columns = [{"sTitle": "type", "bVisible":false},
-        {"sTitle":"Date"},
-        {"sTitle":"Start"},
-        {"sTitle":"End"},
-        {"sTitle":"Duration"},
-        {"sTitle":"Song"},
-        {"sTitle":"Artist"},
-        {"sTitle":"Album"},
-        {"sTitle":"Playlist"},
-        {"sTitle":"Show"},
-        {"sTitle":"bgcolor", "bVisible":false},
-        {"sTitle":"group_id", "bVisible":false}];
-
-function createDataGrid(){
-    	
-	columns[1]["fnRender"] = getDateText;
-	columns[2]["fnRender"] = getTimeText;
-	columns[3]["fnRender"] = getTimeText;
-	columns[4]["fnRender"] = changeTimePrecisionInit;
-
-	$('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="datatable" id="nowplayingtable"></table>' );
-	$('#nowplayingtable').dataTable( {
-		"bSort" : false,
-		"bJQueryUI": true,
-		"bFilter": false,
-		"bInfo": false,
-		"bLengthChange": false,
-        "bPaginate": false,
-		"aoColumns": columns,
-		"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
-            if (aData[aData.length-2] == "t")
-                $(nRow).attr("class", "playing-list");
-            if (aData[0] == "c")
-				$(nRow).attr("class", "playing-song");
-            else if (aData[0] == "b")
-                $(nRow).attr("class", "gap");
-			return nRow;
-		},
-        "bAutoWidth":false
-	} );
-    
-
-}
+var columns = [{"sTitle": "type", "bVisible":false},
+    {"sTitle":"Date"},
+    {"sTitle":"Start"},
+    {"sTitle":"End"},
+    {"sTitle":"Duration"},
+    {"sTitle":"Song"},
+    {"sTitle":"Artist"},
+    {"sTitle":"Album"},
+    {"sTitle":"Playlist"},
+    {"sTitle":"Show"},
+    {"sTitle":"bgcolor", "bVisible":false},
+    {"sTitle":"group_id", "bVisible":false}];
 
 function getDateString(){
     var date0 = $("#datepicker").datepicker("getDate");
@@ -106,11 +75,14 @@ function getAJAXURL(){
 
 function updateDataTable(){
     var table = $('#nowplayingtable').dataTable();
-    
-    table.fnClearTable(false);
-    table.fnAddData(datagridData.rows, false);
-    table.fnDraw(true);
-    
+
+    //Check if datagridData has been initialized since this update
+    //function can be called before ajax call has been returned.
+    if (datagridData != null){
+        table.fnClearTable(false);
+        table.fnAddData(datagridData.rows, false);
+        table.fnDraw(true);
+    }
 }
 
 function getData(){
@@ -136,6 +108,34 @@ function redirect(url){
     document.location.href = url;
 }
 
+function createDataGrid(){
+    	
+	columns[1]["fnRender"] = getDateText;
+	columns[2]["fnRender"] = getTimeText;
+	columns[3]["fnRender"] = getTimeText;
+	columns[4]["fnRender"] = changeTimePrecisionInit;
+
+	$('#nowplayingtable').dataTable( {
+		"bSort" : false,
+		"bJQueryUI": true,
+		"bFilter": false,
+		"bInfo": false,
+		"bLengthChange": false,
+        "bPaginate": false,
+		"aoColumns": columns,
+		"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
+            if (aData[aData.length-2] == "t")
+                $(nRow).attr("class", "playing-list");
+            if (aData[0] == "c")
+				$(nRow).attr("class", "playing-song");
+            else if (aData[0] == "b")
+                $(nRow).attr("class", "gap");
+			return nRow;
+		},
+        "bAutoWidth":false
+	} );
+}
+
 $(document).ready(function() {
     
     createDataGrid();