Problems getting DataTable to work with ASP.NET MVC WebGrid

comicrage

Hi,

I am using ASP.NET MVC 5 with datatables. So far, I can't get the datatable to apply its look and feel on my webgrid. Can anyone help?
Thanks

@Model IEnumerable<isr.models.facilities>

@{
    Layout = null;
}

@section Javascript {

    @*<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js"></script>*@

                  <script type="text/javascript" src="~/Scripts/DataTables-1.10.5/media/js/jquery.js" ></script>

    <script type="text/javascript" language="javascript"
            src="~/Scripts/DataTables-1.10.5/media/js/jquery.dataTables.min.js"></script>


    <script type="text/javascript" language="javascript"
            src="~/Scripts/gridmvc.min.js"></script>

    <link href="~/Scripts/DataTables-1.10.5/media/css/demo_table.css" rel="stylesheet" />

    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            var oResultGrid = $("[id$='gvFacilities']");
            if (fixEmptyDataRow(oResultGrid)) {
                var oTable = oResultGrid.dataTable({
                    "bPaginate": false,
                    "bFilter": false,
                    "bInfo": false

                });
            }
            else {
                oResultGrid.dataTable({
                    "sPaginationType": "full_numbers",
                    "aLengthMenu": [10, 25, 50, 100],
                    "aaSorting": [[0, 'asc']],
                    "sDom": '<"top"lif<"clear">>rt<"bottom"lip<"clear">>',
                    "aoColumns": [
                            { "bSortable": true },
                            { "bSortable": true },
                            { "bSortable": true },
                            { "bSortable": true },
                            { "bSortable": true },
                            { "bSortable": true },
                            { "bSortable": true },
                            { "bSortable": true },
                            { "bSortable": true },
                            { "bSortable": true },
                            { "bSortable": true },
                            { "bSortable": true },
                            { "bSortable": true },
                            { "bSortable": true },
                            { "bSortable": true }
                    ]
                });
            }
        });
        function fixEmptyDataRow(table) {
            // Check Contents of 1st TD tag in table.  If it contains the EmptyDataRows text, then this is an Empty Data Row
            var value = $(table).children('tbody').children('tr').children('td:first').text().trim();
            // Prepend THEAD required by JQuery DataTables for the EmptyDataRow Table
            if (value == "No results match your query") {
                // EmptyDataItems template
                table.prepend("<THEAD><TH></TH></THEAD>");
                return true;
            }
            else
                return false;
        };

        $(document).ready(function () {
            alert(1);
            $("#gridContent tbody tr").each(function (i, row) {
                alert(2);

                var PrevStatMissionValue = $(this).find("#lblPrevStatMission").text();
                alert(PrevStatMissionValue);
            });
        });

    </script>
}
<div id="gvFacilities">
    @{
        var grid = new WebGrid(Model, canPage: true, selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridContent");

        <div id="gridContent">
            @grid.GetHtml(
            htmlAttributes: new { id = "gvFacilities" },
            tableStyle: "webGrid",
            headerStyle: "header",
            alternatingRowStyle: "alt",
            columns: grid.Columns(
                grid.Column("SITE_UID", format: @<text> <span class="display-mode"></span><label id="lblSiteUID" class="edit-mode">@item.SITE_UID</label></text>, style: "color:blue"),
                grid.Column("FACNO", format: @<text> <span class="display-mode"><label id="lblFacNo" class="edit-mode">@item.FACNO</label></span></text>),
                grid.Column("CATCODE", format: @<text> <span class="display-mode"><label id="lblCatCode" class="edit-mode">@item.CATCODE</label></span></text>),
                grid.Column("UIC", format: @<text> <span class="display-mode"><label id="lblUIC" class="edit-mode">@item.UIC</label></span></text>),
                grid.Column("PREV_STAT_MISSION", format: @<text> <span class="display-mode"><label id="lblPrevStatMission" class="edit-mode"> @(item.PREV_STAT_MISSION == 1 ? " F1 " : item.PREV_STAT_MISSION == 2 ? "  F2 " : item.PREV_STAT_MISSION == 3 ? " F3 " : item.PREV_STAT_MISSION == 4 ? " F4 " : item.PREV_STAT_MISSION == 5 ? " F5 " : "")</label></span></text>),
                grid.Column("STAT_MISSION", format: @<text><span class="display-mode"><label id="lblStatMission" class="edit-mode">@(item.STAT_MISSION == 1 ? "F1" : item.STAT_MISSION == 2 ? "F2" : item.STAT_MISSION == 3 ? "F3" : item.STAT_MISSION == 4 ? "F4" : item.STAT_MISSION == 5 ? "F5" : "")</label></span></text>),
                grid.Column("PREV_STAT_QUAL", format: @<text><span class="display-mode"><label id="lblPrevStatQual" class="edit-mode">@(item.PREV_STAT_QUAL == 1 ? "Q1" : item.PREV_STAT_QUAL == 2 ? "Q2" : item.PREV_STAT_QUAL == 3 ? "Q3" : item.PREV_STAT_QUAL == 4 ? "Q4" : item.PREV_STAT_QUAL == 5 ? "Q5" : "")</label></span></text>),
                grid.Column("STAT_QUAL", format: @<text><span class="display-mode"><label id="lblStatQual" class="edit-mode">@(item.STAT_QUAL == 1 ? "Q1" : item.PREV_STAT_QUAL == 2 ? "Q2" : item.PREV_STAT_QUAL == 3 ? "Q3" : item.PREV_STAT_QUAL == 4 ? "Q4" : item.PREV_STAT_QUAL == 5 ? "Q5" : "")</label></span> </text>),
                grid.Column("CYRATING", format: @<text><span class="display-mode"><label id="lblCYRating" class="edit-mode">@(item.CYRATING != null ? item.CYRATING : "")</label></span></text>),
                grid.Column("CONSTR_TYPE", format: @<text><span class="display-mode"><label id="lblType" class="edit-mode">@(item.CONSTR_TYPE != null ? item.CONSTR_TYPE : "")</label></span> </text>),    
                grid.Column("ASSET_UID", format: @<text><span class="display-mode"><label id="lblAssetUID" class="edit-mode">@(item.ASSET_UID != null ? item.ASSET_UID : "")</label></span></text>),
                grid.Column("RATINGDUE", format: @<text><span class="display-mode"><label id="lblRatingDue" class="edit-mode">@(item.RATINGDUE != null ? item.RATINGDUE : "")</label></span></text>),
                grid.Column("AMOUNT", format: @<text><span class="display-mode"><label id="lblAmount" class="edit-mode">@(item.AMOUNT != null ? item.AMOUNT : "")</label></span></text>),    
                grid.Column("CATCODE_UM", format: @<text><span class="display-mode"><label id="lblCatcodeUM" class="edit-mode">@(item.CATCODE_UM != null ? item.CATCODE_UM : "")</label></span></text>),
                grid.Column("UIC", format: @<text><span class="display-mode"><label id="lblUIC" class="edit-mode">@(item.UIC != null ? item.UIC : "")</label></span></text>)

               ))
        </div>
    }
</div>