N.Sant
N.Sant

Reputation: 51

jQuery Datatable YADCF not showing in MVC

I EDITED THIS QUESTION.
In my MVC project I created a tab called "Knowledge". I was finally able to make some things work. I implemented a YADCF datatable on it but it is not working. The datatable features appear to be there but not the yadcf. I included the code below and attached the picture of the three errors I get in the console. Please help, thank you!

Here is my code:

    @model IEnumerable<HelpDeskSupport.Models.KnowledgeBaseModel>

@{
Layout = null;
}

<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/yadcf-master/jquery.dataTables.yadcf.css"></script>
<script src="~/yadcf-master/jquery.dataTables.yadcf.js"></script>
<script src="~/DataTables/datatables.css"></script>
<script src="~/DataTables/datatables.js"></script>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></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>
    </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>
            @*<td>
                @Html.ActionLink("Edit", "Edit", new { id=item.KBNumber }) |
                @Html.ActionLink("Details", "Details", new { id=item.KBNumber }) |
                @Html.ActionLink("Delete", "Delete", new { id=item.KBNumber })
                </td>*@
        </tr>
    }
</tbody>
</table>

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

    var oTable;
    oTable = $('#knowledgeTable').DataTable({
        stateSave: true
    });

    yadcf.init(oTable, [
        {
        column_number: 0
        //*filter_type: "auto_complete",
        //*text_data_delimiter: ","
    }, {
        column_number: 1
        //*filter_type: "auto_complete",
        //*text_data_delimiter: ","
        //filter_type: "range_number_slider"
    }, {
        column_number: 2
        //filter_type: "date"
    }, {
        column_number: 3
    }, {
        column_number: 4
        //*filter_type: "date"
        //column_data_type: "html",
        //html_data_type: "text",
        //filter_default_label: "Select tag"
    }, {
        column_number: 5
    }, {
        column_number: 6
        //*filter_type: "text",
        //*exclude: true,
        //*exclude_label: '!(not)'
    }, {
        column_number: 7
        //*filter_type: "date"
    }, {
        column_number: 8
    }
    ]);
});

</script>

enter image description here enter image description here enter image description here

Upvotes: 1

Views: 94

Answers (0)

Related Questions