New user of editor needs help getting off the ground "DataTables warning"

caharland

Hi,
I have a locally hosted VS Project and SQL server MVC Web App c# project to support my own holiday rental business (the IT is internal not commercial). I have added the Editor plugin via Nuget but can't get the inline editor going on a simple Index page. I am new to this plugin so please pardon a beginner's ignorance.

I have added the javascript from the staff table example on the Editor web site and think that I have amended it where appropriate although I don't know what to do with the ajax reference i.e.

   ajax: {url: '/api/staff',
                    type: 'POST'
                },

The error that I am stuck on is "DataTables warning: table id=ratestable - Ajax error. For more information about this error, please see http://datatables.net/tn/7". Although the data table itself is displaying perfectly.

My Index.cshtml file is as follows:

'''@model IEnumerable<Portugal.ExchangeRate>
@*<script src="https://code.jquery.com/jquery-3.5.1.js" type="text/javascript"></script>*@
@*<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js" type="text/javascript"></script>*@
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
@*<link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">*@
@*<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">*@
@*<link rel="stylesheet" type="text/css" href="../resources/demo.css">*@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
@*<script type="text/javascript" language="javascript" src="/Scripts/dataTables.editor.min.js"></script>*@
@*<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>*@

@{
    ViewBag.Title = "Index";
}

<br />
<p>
    @Html.ActionLink("Add exchange rate", "Create")
</p>

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-primary list-panel" id="list-panel">
            <div class="panel-heading list-panel-heading">
                <h1 class="panel-title list-panel-title">Rates</h1>
            </div>
            <div class="panel-body">
                <table id="ratestable" class="table table-striped table-bordered table-hover" style="width:100%">
                    <thead>
                        <tr>
                            <th>
                                @Html.DisplayNameFor(model => model.RateYear)
                            </th>
                            <th>
                                @Html.DisplayNameFor(model => model.RateMonth)
                            </th>
                            <th>
                                @Html.DisplayNameFor(model => model.Rate)
                            </th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model)
                        {
                            <tr>
                                <td>
                                    @Html.DisplayFor(modelItem => item.RateYear)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.RateMonth)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.Rate)
                                </td>
                                <td>
                                    @Html.ActionLink(" ", "Edit", new { id = item.ID }, new { @class = "glyphicon glyphicon-edit" })
                                    @Html.ActionLink(" ", "Delete", new { id = item.ID }, new { @class = "glyphicon glyphicon-trash" })
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
}
@section Scripts
{

    <script type="text/javascript" language="javascript" class="init">
        var editor; // use a global for the submit and return data rendering in the examples
        $(document).ready(function () {
            editor = new $.fn.dataTable.Editor({
                ajax: "/api/staff",
                table: "#ratestable",
                fields: [{
                    label: "Year:",
                    name: "RateYear"
                }, {
                    label: "Month:",
                    name: "RateMonth"
                }, {
                    label: "Rate:",
                    name: "Rate"
                }
                ]
            });

            var table = $('#ratestable').DataTable({
                dom: 'Bfrtip',
                ajax: {
                    url: '/api/staff',
                    type: 'POST'
                },
                serverSide: true,
                order: [[1, 'asc']],
                columns: [
                    {
                        data: null,
                        defaultContent: '',
                        className: 'select-checkbox',
                        orderable: false,
                        searchable: false
                    },
                    { data: "RateYear" },
                    { data: "RateMonth" },
                    { data: "Rate", render: $.fn.dataTable.render.number(',', '.', 0, '$') }
                ],
                select: {
                    style: 'os',
                    selector: 'td:first-child'
                },
                buttons: [
                    { extend: "create", editor: editor },
                    { extend: "edit", editor: editor },
                    { extend: "remove", editor: editor }
                ]
            });
        });

    </script>

}

Hopefully. this gives you something to go on?

Many thanks, Craig

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

tangerine

You should start debugging by following the link provided in the error message, where you will find diagnostic steps.