Solved: jQuery Datatable YADCF not showing in MVC

Hi,
In my MVC project I created a tab called "Knowledge" (attached is the data is showing as of now). I implemented a YADCF datatable on it but it does not get implemented. What is the mistake I am making? I could not find a solution on my own nor online and I seem to do everything correctly. Attached is shown the tab in question. I also included the code below. Please help, thank you!

Here is my code:

@model IEnumerable<HelpDeskSupport.Models.KnowledgeBaseModel>

@{
    Layout = null;
}

<!DOCTYPE html>

<head>

    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <link href="jquery.datatables.yadcf.css" rel="stylesheet" type="text/css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
    <script src="jquery.dataTables.yadcf.js"></script>

    <style>
        .label {
            padding: 0px 10px 0px 10px;
            border: 1px solid #ccc;
            -moz-border-radius: 1em; /* for mozilla-based browsers */
            -webkit-border-radius: 1em; /* for webkit-based browsers */
            border-radius: 1em; /* theoretically for *all* browsers*/
        }

            .label.lightblue {
                background-color: #99CCFF;
            }

        #external_filter_container_wrapper {
            margin-bottom: 20px;
        }

        #external_filter_container {
            display: inline-block;
        }
    </style>

    <script>
        $(document).ready(function () {
            //'use strict';

            $('#knowledgeTable').dataTable().yadcf([
                {
                    column_number: 0,
                    filter_type: "auto_complete",
                    text_data_delimiter: ","
                }, {
                    column_number: 1,
                    filter_type: "auto_complete",
                    text_data_delimiter: ","
                }, {
                    column_number: 2
                }, {
                    column_number: 3,
                }, {
                    column_number: 4,
                    filter_type: "date"
 
                }, {
                    column_number: 5,
                }, {
                    column_number: 6,
                    filter_type: "text",
                    exclude: true,
                    exclude_label: '!(not)'
                }, {
                    column_number: 7,
                    filter_type: "date"
                }, {
                    column_number: 8,
                }, {
                    column_number: 9,
                }
            ]);
        });               
    </script>

</head>
        <table class="display table table-striped table-bordered" id="knowledgeTable">
            <thead>
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.KBSubject)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.KBFrom)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.KBAssignedTo)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.KBAssignedDt)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.KBRequestType)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.KBBody)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.KBDateSubmitted)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.KBLocation)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.KBCategory)
                    </th>
                    <th></th>
                </tr>
            </thead>

            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.KBSubject)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.KBFrom)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.KBAssignedTo)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.KBAssignedDt)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.KBRequestType)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.KBBody)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.KBDateSubmitted)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.KBLocation)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.KBCategory)
                        </td>
                    </tr>
                }
            </tbody>
        </table>

Open in new window

jQuery Datatable YADCF not showing in MVC

Premium Content

Premium Content

Why Experts Exchange?

Ask ANY Question

Did You Know?