Log grid will reload when logs are cleared.

History grid will reload when history is trimmed or purged.

NzbDrone.Web/Controllers/HistoryController.cs

@@ -19,6 +19,11 @@ namespace NzbDrone.Web.Controllers
         }
 
         public ActionResult Index()
+        {
+            return View();
+        }
+
+        public JsonResult AjaxBinding()
         {
             var history = _historyProvider.AllItemsWithRelationships().Select(h => new HistoryModel
             {
@@ -36,9 +41,11 @@ namespace NzbDrone.Web.Controllers
                 EpisodeId = h.EpisodeId
             }).OrderByDescending(h => h.Date).ToList();
 
-            var serialized = new JavaScriptSerializer().Serialize(history);
-
-            return View((object)serialized);
+            return Json(new
+            {
+                aaData = history
+            },
+            JsonRequestBehavior.AllowGet);
         }
 
         public JsonResult Trim()

NzbDrone.Web/NzbDrone.Web.csproj

@@ -264,6 +264,7 @@
     <Content Include="Content\Images\XbmcNotification.png" />
     <Content Include="favicon.ico" />
     <Content Include="Global.asax" />
+    <Content Include="Scripts\DataTables-1.9.0\media\js\jquery.dataTables.reloadAjax.js" />
     <Content Include="Scripts\DataTables-1.9.0\media\js\jquery.dataTables.editable.js" />
     <Content Include="Scripts\DataTables-1.9.0\media\js\jquery.dataTables.js" />
     <Content Include="Scripts\DataTables-1.9.0\media\js\jquery.dataTables.min.js" />

NzbDrone.Web/Scripts/DataTables-1.9.0/media/js/jquery.dataTables.reloadAjax.js

@@ -0,0 +1,39 @@
+$.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings, sNewSource, fnCallback, bStandingRedraw) {
+    if (typeof sNewSource != 'undefined' && sNewSource != null) {
+        oSettings.sAjaxSource = sNewSource;
+    }
+    this.oApi._fnProcessingDisplay(oSettings, true);
+    var that = this;
+    var iStart = oSettings._iDisplayStart;
+    var aData = [];
+
+    this.oApi._fnServerParams(oSettings, aData);
+
+    oSettings.fnServerData(oSettings.sAjaxSource, aData, function (json) {
+        /* Clear the old information from the table */
+        that.oApi._fnClearTable(oSettings);
+
+        /* Got the data - add it to the table */
+        var aData = (oSettings.sAjaxDataProp !== "") ?
+            that.oApi._fnGetObjectDataFn(oSettings.sAjaxDataProp)(json) : json;
+
+        for (var i = 0; i < aData.length; i++) {
+            that.oApi._fnAddData(oSettings, aData[i]);
+        }
+
+        oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
+        that.fnDraw();
+
+        if (typeof bStandingRedraw != 'undefined' && bStandingRedraw === true) {
+            oSettings._iDisplayStart = iStart;
+            that.fnDraw(false);
+        }
+
+        that.oApi._fnProcessingDisplay(oSettings, false);
+
+        /* Callback user function - for event handlers etc */
+        if (typeof fnCallback == 'function' && fnCallback != null) {
+            fnCallback(oSettings);
+        }
+    }, oSettings);
+}

NzbDrone.Web/Scripts/NzbDrone/grid.js

@@ -53,3 +53,13 @@ function createImageAjaxLink(url, image, alt, title, classes) {
 
     return html;
 }
+
+//Reload/Redraw the grid from the server (bServerSide == true)
+function redrawGrid() {
+    oTable.fnDraw();
+}
+
+//Force reload using Ajax Binding (bServerSide == false)
+function reloadGrid() {
+    oTable.fnReloadAjax();
+}

NzbDrone.Web/Views/History/Index.cshtml

@@ -5,8 +5,8 @@
 @{ViewBag.Title = "History";}
 @section ActionMenu{
     <ul class="sub-menu">
-        <li>@Ajax.ActionLink("Trim History", "Trim", "History", new AjaxOptions { OnSuccess = "reloadHistoryGrid" })</li>
-        <li>@Ajax.ActionLink("Purge History", "Purge", "History", new AjaxOptions { OnSuccess = "reloadHistoryGrid" })</li>
+        <li>@Ajax.ActionLink("Trim History", "Trim", "History", new AjaxOptions { OnSuccess = "reloadGrid" })</li>
+        <li>@Ajax.ActionLink("Purge History", "Purge", "History", new AjaxOptions { OnSuccess = "reloadGrid" })</li>
     </ul>
 }
 @section HeaderContent
@@ -50,11 +50,11 @@
         $(document).ready(function() {
             $('#historyGrid').removeClass('hidden-grid');
 
-            oTable = $('.dataTablesGrid').dataTable({
-            //"sAjaxSource": "History/AjaxBinding",
-            //"bProcessing": true,
+            oTable = $('#historyGrid').dataTable({
+                "sAjaxSource": "History/AjaxBinding",
+                "bServerSide": false,
+                "bProcessing": true,
                 "bShowAll": false,
-                "aaData": @Html.Raw(Model),
                 "bPaginate": true,
                 "bLengthChange": false,
                 "bFilter": true,
@@ -78,7 +78,6 @@
                                     var redownloadImage = "<img src=\"../../Content/Images/Downloading.png\" alt=\"Redownload\" title=\Redownload Episode\" class=\"searchImage\" onclick=\"redownloadHistory(this.parentNode.parentNode, " + row.aData["HistoryId"] + ", " + row.aData["EpisodeId"] + ")\">";
 
                                     return deleteImage + redownloadImage;
-                                //return createImageAjaxLink('/History/Delete?historyId=' + row.aData["HistoryId"], '../../Content/Images/X.png', 'Delete', 'Delete from History', 'searchImage');
                                 }
                                 }, //Actions
                     {

NzbDrone.Web/Views/Log/Index.cshtml

@@ -5,7 +5,7 @@
 @{ ViewBag.Title = "Logs";}
 @section ActionMenu{
     <ul class="sub-menu">
-        <li>@Ajax.ActionLink("Clear Logs", "Clear", "Log", new AjaxOptions { OnSuccess = "reloadGrid" })</li>
+        <li>@Ajax.ActionLink("Clear Logs", "Clear", "Log", new AjaxOptions { OnSuccess = "redrawGrid" })</li>
         <li>@Html.ActionLink("File", "File", "Log")</li>
     </ul>
 }

NzbDrone.Web/Views/Shared/_ReferenceLayout.cshtml

@@ -35,6 +35,7 @@
     @Html.IncludeScript("NzbDrone/AutoBind.js")
     @Html.IncludeScript("NzbDrone/grid.js")
     @Html.IncludeScript("DataTables-1.9.0/media/js/jquery.dataTables.min.js")
+    @Html.IncludeScript("DataTables-1.9.0/media/js/jquery.dataTables.reloadAjax.js")
     @Html.IncludeScript("DataTables-1.9.0/media/js/jquery.dataTables.editable.js")
     @Html.IncludeScript("DataTables-1.9.0/media/js/jquery.jeditable.js")
     @Html.IncludeScript("DataTables-1.9.0/media/js/jquery.validate.js")