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

@@ -52,4 +52,14 @@ function createImageAjaxLink(url, image, alt, title, classes) {
                     "<img class=\"" + classes + "\" src=\"" + image + "\" title=\"" + title + "\" alt=\"" + alt + "\"></a>";
 
     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,51 +50,50 @@
         $(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,
-            "bSort": true,
-            "bInfo": true,
-            "bAutoWidth": false,
-            "iDisplayLength": 20,
-            "sPaginationType": "four_button",
-            "aoColumns": [
-                            { sWidth: '20px', "bSortable": false, "mDataProp": "Indexer", "fnRender": function (row) {
-                                    return "<img src=\"/Content/Images/Indexers/" + row.aData["Indexer"] + ".png\" alt=\"" + row.aData["Indexer"] + "\">";
-                                }
-                            }, //Image
-                            { sWidth: 'auto', "mDataProp": "SeriesTitle" }, //Series Title
-                            { sWidth: '80px', "mDataProp": "EpisodeNumbering", "bSortable": false }, //EpisodeNumbering
-                            { sWidth: 'auto', "mDataProp": "EpisodeTitle", "bSortable": false }, //Episode Title
-                            { sWidth: '70px', "mDataProp": "Quality", "bSortable": false }, //Quality
-                            { sWidth: '150px', "mDataProp": "Date" }, //Grabbed On
-                            { sWidth: '40px', "mDataProp": "HistoryId", "bSortable": false, "fnRender": function (row) {
-                                var deleteImage = "<img src=\"../../Content/Images/X.png\" alt=\"Delete\" title=\"Delete from History\" class=\"searchImage\" onclick=\"deleteHistory(this.parentNode.parentNode, " + row.aData["HistoryId"] + ")\">";
-                                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"] + ")\">";
+                "bPaginate": true,
+                "bLengthChange": false,
+                "bFilter": true,
+                "bSort": true,
+                "bInfo": true,
+                "bAutoWidth": false,
+                "iDisplayLength": 20,
+                "sPaginationType": "four_button",
+                "aoColumns": [
+                                { sWidth: '20px', "bSortable": false, "mDataProp": "Indexer", "fnRender": function (row) {
+                                        return "<img src=\"/Content/Images/Indexers/" + row.aData["Indexer"] + ".png\" alt=\"" + row.aData["Indexer"] + "\">";
+                                    }
+                                }, //Image
+                                { sWidth: 'auto', "mDataProp": "SeriesTitle" }, //Series Title
+                                { sWidth: '80px', "mDataProp": "EpisodeNumbering", "bSortable": false }, //EpisodeNumbering
+                                { sWidth: 'auto', "mDataProp": "EpisodeTitle", "bSortable": false }, //Episode Title
+                                { sWidth: '70px', "mDataProp": "Quality", "bSortable": false }, //Quality
+                                { sWidth: '150px', "mDataProp": "Date" }, //Grabbed On
+                                { sWidth: '40px', "mDataProp": "HistoryId", "bSortable": false, "fnRender": function (row) {
+                                    var deleteImage = "<img src=\"../../Content/Images/X.png\" alt=\"Delete\" title=\"Delete from History\" class=\"searchImage\" onclick=\"deleteHistory(this.parentNode.parentNode, " + row.aData["HistoryId"] + ")\">";
+                                    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
-                {
-                    sWidth: 'auto',
-                    "mDataProp": "Details",
-                    "bSortable": false,
-                    "bVisible": false,
-                    "fnRender": function(row) {
-                        var result = "<b>Overview: </b>" + row.aData["EpisodeOverview"] + "<br/>" +
-                            "<b>NZB Title: </b>" + row.aData["NzbTitle"] + "<br/>" +
-                                "<b>Proper: </b>" + row.aData["IsProper"];
-                        return result;
-                    }
-                } //Details
-            ],
-                "aaSorting": [[5, 'desc']]
+                                    return deleteImage + redownloadImage;
+                                }
+                                }, //Actions
+                    {
+                        sWidth: 'auto',
+                        "mDataProp": "Details",
+                        "bSortable": false,
+                        "bVisible": false,
+                        "fnRender": function(row) {
+                            var result = "<b>Overview: </b>" + row.aData["EpisodeOverview"] + "<br/>" +
+                                "<b>NZB Title: </b>" + row.aData["NzbTitle"] + "<br/>" +
+                                    "<b>Proper: </b>" + row.aData["IsProper"];
+                            return result;
+                        }
+                    } //Details
+                ],
+                    "aaSorting": [[5, 'desc']]
             });
         });
 

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")