Lidarr/NzbDrone.Web/Views/History/Index.cshtml

@model List<HistoryModel>
@using NzbDrone.Common
@using NzbDrone.Web.Models
@using NzbDrone.Web.Helpers
@{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>
    </ul>
}
@section HeaderContent
{
    @Html.IncludeCss("Grid.css")
}

<div class="grid-container">
<table id="historyGrid" class="hidden-grid">
    <thead>
        <tr>
            <th></th>
            <th>Series Title</th>
            <th>Season #</th>
            <th>Episode #</th>
            <th>Episode Title</th>
            <th>Quality</th>
            <th>Grabbed On</th>
        
            @*Commands Column*@
            <th>Actions</th>
            
            @*Details Column*@
            <th>Detailsn</th>
        </tr>
    </thead>
    <tbody>
        @foreach(var history in Model)
        {
            Html.RenderPartial("History", history);
        }
    </tbody>
</table>
</div>

<script type="text/javascript">
    deleteHistoryRowUrl = '../History/Delete';
    redownloadUrl = '../History/Redownload';

    function reloadHistoryGrid() {
        var grid = $('#history').data('tGrid');
        grid.ajaxRequest();
    }

    $(document).ready(function () {
        $('#historyGrid').removeClass('hidden-grid');

        oTable = $('#historyGrid').dataTable({
            "bPaginate": true,
            "bLengthChange": false,
            "bFilter": true,
            "bSort": true,
            "bInfo": true,
            "bAutoWidth": false,
            "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
                        ],
            "aaSorting": [[6, 'desc']]
        });
    });
</script>