History grid will now be built from a json array sent to the view.

NzbDrone.Web/App_Start/RegisterDatatablesModelBinder.cs

@@ -0,0 +1,14 @@
+using System.Web.Mvc;
+using System.Web.WebPages;
+//using RazorGenerator.Mvc;
+
+[assembly: WebActivator.PreApplicationStartMethod(typeof(NzbDrone.Web.App_Start.RegisterDatatablesModelBinder), "Start")]
+
+namespace NzbDrone.Web.App_Start {
+    public static class RegisterDatatablesModelBinder {
+        public static void Start() {
+            if (!ModelBinders.Binders.ContainsKey(typeof(Mvc.JQuery.Datatables.DataTablesParam)))
+                ModelBinders.Binders.Add(typeof(Mvc.JQuery.Datatables.DataTablesParam), new Mvc.JQuery.Datatables.DataTablesModelBinder());
+        }
+    }
+}

NzbDrone.Web/Controllers/HistoryController.cs

@@ -1,5 +1,7 @@
 using System.Linq;
 using System.Web.Mvc;
+using System.Web.Script.Serialization;
+using Mvc.JQuery.Datatables;
 using NzbDrone.Core.Jobs;
 using NzbDrone.Core.Providers;
 using NzbDrone.Web.Models;
@@ -24,20 +26,21 @@ namespace NzbDrone.Web.Controllers
             {
                 HistoryId = h.HistoryId,
                 SeriesId = h.SeriesId,
-                SeasonNumber = h.Episode.SeasonNumber,
-                EpisodeNumber = h.Episode.EpisodeNumber,
+                EpisodeNumbering = string.Format("{0}x{1:00}", h.Episode.SeasonNumber, h.Episode.EpisodeNumber),
                 EpisodeTitle = h.Episode.Title,
                 EpisodeOverview = h.Episode.Overview,
                 SeriesTitle = h.SeriesTitle,
                 NzbTitle = h.NzbTitle,
                 Quality = h.Quality.ToString(),
                 IsProper = h.IsProper,
-                Date = h.Date,
+                Date = h.Date.ToString(),
                 Indexer = h.Indexer,
                 EpisodeId = h.EpisodeId
-            }).ToList();
+            }).OrderByDescending(h => h.Date).ToList();
 
-            return View(history);
+            var serialized = new JavaScriptSerializer().Serialize(history);
+
+            return View((object)serialized);
         }
 
         public JsonResult Trim()
@@ -72,28 +75,5 @@ namespace NzbDrone.Web.Controllers
 
             return JsonNotificationResult.Info("Episode Redownload Started");
         }
-
-        [GridAction]
-        public ActionResult _AjaxBinding()
-        {
-            var history = _historyProvider.AllItemsWithRelationships().Select(h => new HistoryModel
-                                            {
-                                                HistoryId = h.HistoryId,
-                                                SeriesId = h.SeriesId,
-                                                SeasonNumber = h.Episode.SeasonNumber,
-                                                EpisodeNumber = h.Episode.EpisodeNumber,
-                                                EpisodeTitle = h.Episode.Title,
-                                                EpisodeOverview = h.Episode.Overview,
-                                                SeriesTitle = h.SeriesTitle,
-                                                NzbTitle = h.NzbTitle,
-                                                Quality = h.Quality.ToString(),
-                                                IsProper = h.IsProper,
-                                                Date = h.Date,
-                                                Indexer = h.Indexer,
-                                                EpisodeId = h.EpisodeId
-                                            });
-
-            return View(new GridModel(history));
-        }
     }
 }

NzbDrone.Web/Models/HistoryGridModel.cs

@@ -0,0 +1,12 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Web;
+
+namespace NzbDrone.Web.Models
+{
+    public class HistoryGridModel
+    {
+        public string JsonData { get; set; }
+    }
+}

NzbDrone.Web/Models/HistoryModel.cs

@@ -8,15 +8,15 @@ namespace NzbDrone.Web.Models
         public int HistoryId { get; set; }
         public int SeriesId { get; set; }
         public string SeriesTitle { get; set; }
-        public int SeasonNumber { get; set; }
-        public int EpisodeNumber { get; set; }
+        public string EpisodeNumbering { get; set; }
         public string EpisodeTitle { get; set; }
         public string EpisodeOverview { get; set; }
         public string NzbTitle { get; set; }
         public string Quality { get; set; }
-        public DateTime Date { get; set; }
+        public string Date { get; set; }
         public bool IsProper { get; set; }
         public string Indexer { get; set; }
         public int EpisodeId { get; set; }
+        public string Details { get; set; }
     }
 }

NzbDrone.Web/NzbDrone.Web.csproj

@@ -53,6 +53,9 @@
       <Private>True</Private>
       <HintPath>..\packages\Microsoft.Web.Infrastructure.1.0.0.0\lib\net40\Microsoft.Web.Infrastructure.dll</HintPath>
     </Reference>
+    <Reference Include="Mvc.JQuery.Datatables">
+      <HintPath>..\packages\Mvc.JQuery.Datatables.1.1.47\lib\net40\Mvc.JQuery.Datatables.dll</HintPath>
+    </Reference>
     <Reference Include="MvcMiniProfiler, Version=1.9.0.0, Culture=neutral, PublicKeyToken=b44f9351044011a3, processorArchitecture=MSIL">
       <HintPath>..\packages\MiniProfiler.1.9\lib\net40\MvcMiniProfiler.dll</HintPath>
     </Reference>
@@ -79,11 +82,13 @@
       <Private>True</Private>
       <HintPath>..\packages\EntityFramework.SqlServerCompact.4.1.8482.2\lib\System.Data.SqlServerCe.Entity.dll</HintPath>
     </Reference>
+    <Reference Include="System.Runtime.Serialization" />
     <Reference Include="System.Transactions" />
     <Reference Include="System.Web" />
     <Reference Include="System.Web.Abstractions">
       <Private>True</Private>
     </Reference>
+    <Reference Include="System.Web.Extensions" />
     <Reference Include="System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, processorArchitecture=MSIL">
       <SpecificVersion>False</SpecificVersion>
       <HintPath>..\Libraries\MVC3\System.Web.Mvc.dll</HintPath>
@@ -268,6 +273,7 @@
     <Compile Include="App_Start\EntityFramework.SqlServerCompact.cs" />
     <Compile Include="App_Start\Logging.cs" />
     <Compile Include="App_Start\MiniProfiler.cs" />
+    <Compile Include="App_Start\RegisterDatatablesModelBinder.cs" />
     <Compile Include="Filters\JsonErrorFilter.cs" />
     <Compile Include="Controllers\CommandController.cs" />
     <Compile Include="Controllers\DirectoryController.cs" />
@@ -295,6 +301,7 @@
     <Compile Include="Helpers\DescriptionExtension.cs" />
     <Compile Include="Helpers\HtmlPrefixScopeExtensions.cs" />
     <Compile Include="Helpers\IsCurrentActionHelper.cs" />
+    <Compile Include="Models\HistoryGridModel.cs" />
     <Compile Include="Models\UpcomingEpisodesModel.cs" />
     <Compile Include="Models\SeasonModel.cs" />
     <Compile Include="Models\SeriesDetailsModel.cs" />
@@ -482,6 +489,7 @@
     <Content Include="Scripts\jquery-1.7.1-vsdoc.js" />
     <Content Include="Scripts\jquery-1.7.1.js" />
     <Content Include="Scripts\jquery-1.7.1.min.js" />
+    <Content Include="Scripts\jquery.dataTables.columnFilter.js" />
     <Content Include="Scripts\jquery.hotkeys.js" />
     <Content Include="Scripts\jquery.livequery.js" />
     <Content Include="Scripts\jquery.validate-vsdoc.js" />
@@ -678,7 +686,7 @@
     <None Include="Scripts\DataTables-1.9.0\extras\FixedColumns\media\js\FixedColumns.min.js.gz" />
     <None Include="Scripts\DataTables-1.9.0\extras\Scroller\media\js\Scroller.min.js.gz" />
     <None Include="Scripts\DataTables-1.9.0\extras\TableTools\media\js\TableTools.min.js.gz" />
-    <Content Include="Views\History\History.cshtml" />
+    <Content Include="Views\Shared\DataTable.cshtml" />
   </ItemGroup>
   <Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />
   <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v10.0\WebApplications\Microsoft.WebApplication.targets" />

NzbDrone.Web/Scripts/NzbDrone/grid.js

@@ -30,13 +30,21 @@ $('.dataTable td:not(:last-child)').live('click', function () {
     }
 
     else {
-        oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'Details');
+        oTable.fnOpen(nTr, fnFormatDetails(nTr), 'Details');
         $(nTr).addClass('details-opened');
     }
 });
 
 //Datatables format display details
-function fnFormatDetails(oTable, nTr) {
+function fnFormatDetails(nTr) {
     var aData = oTable.fnGetData(nTr);
-    return aData[aData.length - 1];
+    return aData["Details"];
+}
+
+//Create Image
+function createImageAjaxLink(url, image, alt, title, classes) {
+    var html = "<a onclick=\"Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace });\" href=\"" + url + "\">" +
+                    "<img class=\"" + classes + "\" src=\"" + image + "\" title=\"" + title + "\" alt=\"" + alt + "\"></a>";
+
+    return html;
 }

NzbDrone.Web/Views/History/History.cshtml

@@ -1,26 +0,0 @@
-
-@using NzbDrone.Web.Helpers
-@model NzbDrone.Web.Models.HistoryModel
-
-<tr class="@Model.EpisodeId">
-    <td><img alt='@Model.Indexer' src='@Url.Content("~/Content/Images/Indexers/")@(Model.Indexer).png' /></td>
-    <td>@Html.ActionLink(Model.SeriesTitle, "Details", "Series", new { seriesId = Model.SeriesId }, null)</td>
-    <td>@Model.SeasonNumber</td>
-    <td>@Model.EpisodeNumber</td>
-    <td>@Model.EpisodeTitle</td>
-    <td>@Model.Quality</td>
-    <td>@Model.Date</td>
-
-    @*Commands Column*@
-    <td>
-        @Ajax.ImageActionLink("../../Content/Images/X.png", new { Alt = "Delete", Title = "Delete from history", @class = "searchImage" }, "Delete", "History", new { HistoryId = Model.HistoryId }, new AjaxOptions { OnSuccess = "reloadHistoryGrid" }, null)
-        @Ajax.ImageActionLink("../../Content/Images/Downloading.png", new { Alt = "Redownload", Title = "Redownlod Episode", @class = "searchImage" }, "Redownload", "History", new { HistoryId = @Model.HistoryId, EpisodeId = @Model.EpisodeId }, new AjaxOptions { OnSuccess = "reloadHistoryGrid" }, null)
-    </td>
-    
-    @*Details Column*@
-    <td>
-        <b>Overview: </b>@Model.EpisodeOverview<br/>
-        <b>NZB Title: </b>@Model.NzbTitle<br/>
-        <b>Proper: </b>@Model.IsProper
-    </td>
-</tr>

NzbDrone.Web/Views/History/Index.cshtml

@@ -1,4 +1,4 @@
-@model List<HistoryModel>
+@model String
 @using NzbDrone.Common
 @using NzbDrone.Web.Models
 @using NzbDrone.Web.Helpers
@@ -20,8 +20,7 @@
         <tr>
             <th></th>
             <th>Series Title</th>
-            <th>Season #</th>
-            <th>Episode #</th>
+            <th>Episode</th>
             <th>Episode Title</th>
             <th>Quality</th>
             <th>Grabbed On</th>
@@ -30,14 +29,14 @@
             <th>Actions</th>
             
             @*Details Column*@
-            <th>Detailsn</th>
+            <th style="display: none;">Details</th>
         </tr>
     </thead>
     <tbody>
-        @foreach(var history in Model)
+        @*@foreach(var history in Model)
         {
             Html.RenderPartial("History", history);
-        }
+        }*@
     </tbody>
 </table>
 </div>
@@ -55,6 +54,10 @@
         $('#historyGrid').removeClass('hidden-grid');
 
         oTable = $('#historyGrid').dataTable({
+            //"sAjaxSource": "History/AjaxBinding",
+            //"bProcessing": true,
+            "bShowAll": false,
+            "aaData": @Html.Raw(Model),
             "bPaginate": true,
             "bLengthChange": false,
             "bFilter": true,
@@ -64,17 +67,56 @@
             "iDisplayLength": 20,
             "sPaginationType": "four_button",
             "aoColumns": [
-                            { sWidth: '20px', "bSortable": false }, //Image
-                            { sWidth: 'auto' }, //Series Title
-                            { sWidth: '90px' }, //Season #
-                            { sWidth: '90px' }, //Episode #
-                            { sWidth: 'auto' }, //Episode Title
-                            { sWidth: '70px' }, //Quality
-                            { sWidth: '150px' }, //Grabbed On
-                            { sWidth: '40px', "bSortable": false }, //Actions
-                            { sWidth: 'auto', "bSortable": false, "bVisible": false } //Details
+                            { 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", "bSoratble": 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": [[6, 'desc']]
+            "aaSorting": [[5, 'desc']]
+        });
+    });
+    
+    function deleteHistory(row, historyId) {
+        //Delete from DB
+        $.ajax({
+                    type: "POST",
+                    url: deleteHistoryRowUrl,
+                    data: { historyId: historyId },
+                    success: function () {
+                        oTable.fnDeleteRow(oTable.fnGetPosition(row));
+                    }
                 });
+        
+    }
+    
+    function redownloadHistory(row, historyId, episodeId) {
+        $.ajax({
+                    type: "POST",
+                    url: redownloadUrl,
+                    data: { historyId: historyId, episodeId: episodeId },
+                    success: function () {
+                        oTable.fnDeleteRow(oTable.fnGetPosition(row));
+                    }
                 });
+    }
 </script>